Ternaarioperaattori JSX:ssä

Kuten jo tiedät, aaltosulkujen sisällä voit suorittaa JavaScript-koodia. Itse asiassa tämän koodin ei tarvitse olla mitä tahansa, vaan vain yksinkertaisinta.

Erityisesti ehtolauseita if ei voi käyttää niiden sisällä. Niiden sijasta tulisi käyttää lyhennettyjä ehtomuotoja.

Esitetään yksi tai toinen teksti vakion show arvosta riippuen. Käytetään tähän ternaarioperaattoria:

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

Voi toimia paitsi tekstien, myös taggien kanssa:

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

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