Ternarni operator u JSX-u

Kao što već znate, unutar vitičastih zagrada možete izvršavati JavaScript kod. Zapravo, ovaj kod ne može biti bilo koji, već samo najjednostavniji.

Posebno, uslov if tamo se ne može primeniti. Umesto toga treba koristiti skraćene varijante uslova.

Hajde da u zavisnosti od vrednosti konstante show prikažemo jedan ili drugi tekst. Koristimo za ovo ternarni operator:

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

Možete raditi ne samo sa tekstovima, već i sa tagovima:

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

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