Ternära operatorn i JSX

Som du redan vet kan du köra JavaScript-kod inuti klammerparenteser. Egentligen kan denna kod inte vara vilken som helst, utan bara den enklaste.

Specifikt kan villkorssatser if inte användas där. Istället bör du använda förkortade villkorsversioner.

Låt oss, beroende på värdet av konstanten show, visa en text eller en annan. Vi använder den ternära operatorn:

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

Du kan arbeta inte bara med texter, utan även med taggar:

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

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