Trabalhar com lógica em arquivos JSX
JSX é uma combinação de HTML e JavaScript. Se quiser lógica, por exemplo, determinar como ou se deseja exibir algo, use JavaScript. Você pode usar instruções if...else, instruções case ou qualquer outra lógica booliana.
Operador ternário
Uma das maneiras mais populares de injetar a lógica booliana em um aplicativo é o operador ternário. O operador ternário é uma maneira abreviada de criar uma instrução if...else em uma única linha de código. Há três componentes da sintaxe ternária: a expressão booliana, o valor retornado se a expressão for true e o valor de retorno se a expressão for false.
Por exemplo, se quiser exibir uma mensagem se um número for par ou ímpar, você poderá escrever o seguinte:
const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');
Inicie a expressão com o valor booliano (number % 2). Se o número for ímpar, o valor booliano (resto) será 1 ou true; o primeiro valor (The number is odd) será retornado. Se o número for par, o resto será 0, portanto, o valor booliano será false; o segundo valor (The number is even) será retornado. O código anterior resulta na mensagem The number is odd.
Ternário e JSX
Você pode aproveitar essa sintaxe para determinar como os valores devem ser exibidos. Se quiser definir dinamicamente a class de um elemento HTML com base em um valor, poderá usar o seguinte:
<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>
Observação
Você pode observar que o atributo usado é className em vez de class. Isso ocorre porque a palavra class está reservada em JavaScript. Para evitar o conflito de runtime, use className em vez disso.