if داخل مكون react

لا يمكنك استخدام if-else أو حتى switch داخل jsx لأن jsx يوفر فقط التجميلات اللغوية مما يعني انه فقط يمكنك استخدام التعبيرات وليس التصريحات و في حالتك يمكنك استخدام العامل الثلاثي هكذا

  return (
       <div style="container">
            {state == 'news'? <p>data</p>: null }
        </div>
    )

واذا لسبب ما أردت استخدام if-else فيمكنك تعيين ذلك الجزء من الشيفرة في دالة خارجية ثم يمكنك استدعاء الدالة داخل jsx

renderElement(){
   if(state == 'news')
      return <p>data</p>;
   return null;
}

return (
       <div style="container">
            {renderElement() }
        </div>
    )