Ternární operátor v JSX

Jak již víte, uvnitř složených závorek lze provádět JavaScriptový kód. Ve skutečnosti tento kód nemůže být libovolný, ale pouze ten nejjednodušší.

Konkrétně podmínky if tam nelze použít. Místo toho byste měli používat zkrácené verze podmínek.

V závislosti na hodnotě konstanty show vypišme jeden nebo druhý text. Použijme k tomu ternární operátor:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? 'text1' : 'text2'}
  </div>;
}

Lze pracovat nejen s texty, ale i s tagy:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? <p>text1</p> : <p>text2</p>}
  </div>;
}

jsxfunction App() {
  const age = 19;
  
  return <div>
    
  </div>;
}