Operator trójargumentowy w JSX

Jak już wiesz, wewnątrz nawiasów klamrowych można wykonywać kod JavaScript. W rzeczywistości ten kod nie może być dowolny, a tylko najprostszy.

W szczególności, nie można tam stosować warunków if. Zamiast tego należy używać skróconych wariantów warunków.

W zależności od wartości stałej show wyświetlmy jeden lub drugi tekst. Użyjemy do tego operatora trójargumentowego:

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

Można pracować nie tylko z tekstami, ale i z tagami:

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

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