Operatore Ternario in JSX

Come già sapete, all'interno delle parentesi graffe si può eseguire codice JavaScript. In realtà questo codice non può essere qualsiasi, ma solo il più semplice.

In particolare, le condizioni if non possono essere utilizzate lì. Invece, si dovrebbero usare le versioni abbreviate delle condizioni.

A seconda del valore della costante show, visualizziamo un testo o un altro. Usiamo a questo scopo l'operatore ternario:

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

Si può lavorare non solo con testi, ma anche con tag:

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

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