Ternárny operátor v JSX

Ako už viete, vo vnútri zložených zátvoriek je možné vykonávať JavaScript kód. V skutočnosti tento kód nemôže byť ľubovoľný, ale len ten najjednoduchší.

Konkrétne, podmienky if tam použiť nejde. Namiesto toho by ste mali používať skrátené verzie podmienok.

V závislosti od hodnoty konštanty show vypíšme jeden alebo druhý text. Použime na to ternárny operátor:

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

Môžeme pracovať nielen s textami, ale aj s tagmi:

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

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