Operador ternario en JSX

Como ya sabes, dentro de llaves se puede ejecutar código JavaScript. En realidad, este código no puede ser cualquiera, sino solo el más simple.

En particular, las condiciones if no se pueden aplicar allí. En su lugar, se deben utilizar variantes abreviadas de condiciones.

Dependiendo del valor de la constante show, mostremos un texto u otro. Usemos para ello el operador ternario:

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

Se puede trabajar no solo con textos, sino también con etiquetas:

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

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