Operatorul ternar în JSX

După cum știți deja, în interiorul acoladelor puteți executa cod JavaScript. De fapt, acest cod nu poate fi oricare, ci doar cel mai simplu.

În special, condițiile if nu pot fi aplicate acolo. În schimb, ar trebui să folosiți variante prescurtate de condiții.

Hai să afișăm un text sau altul în funcție de valoarea constantei show. Să folosim operatorul ternar:

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

Puteți lucra nu doar cu texte, ci și cu tag-uri:

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

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