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:
function App() {
const show = true;
return <div>
{show ? 'text1' : 'text2'}
</div>;
}
É possível trabalhar não apenas com textos, mas também com tags:
function App() {
const show = true;
return <div>
{show ? <p>text1</p> : <p>text2</p>}
</div>;
}
Dado o seguinte código:
function App() {
const age = 19;
return <div>
</div>;
}
Se 18 ou mais estiver armazenado em age,
então, no texto da tag div, mostre ao usuário
um parágrafo com um texto, e se for menos - então
com outro.
