Cómo renderizar condicionalmente los componentes en React utilizando el operador ternario.

Al desarrollar aplicaciones complejas con React, a menudo nos encontramos con la necesidad de renderizar componentes de manera condicional. Por ejemplo, podríamos necesitar mostrar un componente diferentes en función de si el usuario está actualmente registrado o no.

Una forma común y recomendada de renderizar componentes de manera condicional en React es utilizando el operador ternario dentro de JSX.

¿Qué es el operador ternario?

En JavaScript, el operador ternario es un operador de condición única y compacta que toma tres operandos: una condición, una declaración (o expresión) que se ejecuta cuando la condición es verdadera y otra que se ejecuta cuando la condición es falsa. La sintaxis básica es la siguiente:

condicion ? expresionSiVerdadero : expresionSiFalso

Cómo usar el operador ternario en React

Este operador es especialmente útil en React cuando deseamos renderizar diferentes componentes o elementos JSX en función de una condición. Veamos un ejemplo práctico:

function Saludo({estaRegistrado}) {
  return (
    <div>
      { estaRegistrado 
        ? <h1>Bienvenido de nuevo!</h1> 
        : <h1>Por favor, regístrese.</h1> 
      }
    </div>
  );
}

En este ejemplo, el componente Saludo renderiza diferentes mensajes en función del valor de la prop estaRegistrado. Si estaRegistrado es verdadero, se muestra el mensaje "Bienvenido de nuevo!", y si es falso, el mensaje "Por favor, regístrese."

Este enfoque nos permite tener un código más limpio y fácil de leer y permite realizar la lógica de renderizado condicional directamente dentro de nuestro JSX.

Recomendaciones y mejores prácticas

Si bien el operador ternario es una forma común y compacta de renderizar de forma condicional en React, es importante tener en cuenta que puede complicarse rápidamente cuando tenemos múltiples estados o condiciones. En estos casos, podría ser útil extraer la lógica de renderizado a una función separada, o incluso utilizar una combinación de if-else y componentes de orden superior para mantener el código limpio y fácil de entender.

Finalmente, recordar que React también permite el uso de la cortocircuitería con el operador AND && para renderizados condicionales, esto se convierte en una opción eficaz cuando solo quieres renderizar algo cuando una condición es verdadera.