Operador Ternário em JSX

Como você já sabe, dentro de chaves é possível executar código JavaScript. Na verdade, esse código não pode ser qualquer um, apenas o mais simples.

Em particular, não é possível usar condições if lá. Em vez disso, deve-se usar as versões abreviadas de condições.

Vamos, dependendo do valor da constante show, exibir um texto ou outro. Vamos usar para isso o operador ternário:

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

É possível trabalhar não apenas com textos, mas também com tags:

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

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