Trabajo con lógica en archivos JSX
JSX es una combinación de HTML y JavaScript. Si desea una lógica, por ejemplo para determinar cómo o si se debe mostrar algo, utilice JavaScript. Puede utilizar instrucciones if...else o instrucciones case, o cualquier otra lógica booleana.
Operador ternario
Una de las formas más populares de insertar lógica booleana en una aplicación es el operador ternario. El operador ternario es una forma abreviada de crear una instrucción if...else en una sola línea de código. Hay tres componentes de la sintaxis ternaria: la expresión booleana, el valor devuelto si la expresión es verdadera y el valor devuelto si la expresión es falsa.
Por ejemplo, si desea mostrar un mensaje si un número es par o impar, puede escribir lo siguiente:
const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');
La expresión se inicia con el valor booleano (number % 2). Si el número es impar, el valor booleano (el resto) es 1 o true; se devolverá el primer valor (The number is odd). Si el número es par, el resto es 0, por lo que el valor booleano es false; se devolverá el segundo valor (The number is even). El código anterior da como resultado el mensajeThe number is odd.
Ternario y JSX
Puede aprovechar esta sintaxis para determinar cómo se deben mostrar los valores. Si desea establecer dinámicamente el parámetro class de un elemento HTML basándose en un valor, puede utilizar lo siguiente:
<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>
Nota:
Es posible que observe que el atributo utilizado es className en lugar de class. Esto se debe a que la palabra class está reservada en JavaScript. Para evitar confundir el entorno de ejecución, use className en su lugar.