Ternaire operator in JSX

Zoals je al weet, kun je binnen de accolades JavaScript code uitvoeren. Eigenlijk kan deze code niet zomaar elke code zijn, maar alleen de eenvoudigste.

In het bijzonder kunnen voorwaarden zoals if daar niet gebruikt worden. In plaats daarvan moet je gebruik maken van verkorte varianten van voorwaarden.

Laten we, afhankelijk van de waarde van de constante show, de ene of de andere tekst weergeven. Laten we hiervoor de ternaire operator gebruiken:

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

Je kunt niet alleen werken met teksten, maar ook met tags:

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

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