En React, el renderizado condicional es el proceso de mostrar contenido diferente en función de ciertas condiciones o estados del componente. Esto te permite crear interfaces de usuario dinámicas que pueden adaptarse a cambios en los datos y a las interacciones del usuario.

En este proceso, puedes utilizar estructuras condicionales para decidir qué contenido debe mostrarse.

¿Cómo implementar el renderizado condicional?

Existen varias formas de implementar el renderizado condicional en React. A continuación se explican las más comunes:

1. Usando el operador ternario

El operador ternario es una forma válida de escribir una condición. Su sintaxis es:

condición ? valorSiVerdadero : valorSiFalso

Ejemplo:

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

En este ejemplo, si esUsuario es true, se mostrará “Bienvenido de nuevo!”; de lo contrario, se mostrará “Por favor, regístrate.”.

2. Usando el operador lógico AND

Cuando solo necesitas renderizar algo si una condición es verdadera, puedes usar el operador &&.

Ejemplo:

function Notificacion({ tieneMensajes }) {
  return (
    <div>
      <h2>Bandeja de entrada</h2>
      {tieneMensajes && <p>Tienes nuevos mensajes!</p>}
    </div>
  );
}

Aquí, el mensaje “Tienes nuevos mensajes!” solo se mostrará si tieneMensajes es true.

3. Usando if-else (dentro de funciones)

Aunque no se puede usar directamente dentro de JSX, if-else es útil para condiciones más complejas cuando se usa antes de retornar el JSX.

Ejemplo:

function EstadoSesion({ estaLogueado }) {
  if (estaLogueado) {
    return <h1>Estás conectado.</h1>;
  } else {
    return <h1>No has iniciado sesión.</h1>;
  }
}

4. Renderizado condicional con funciones

Puedes encapsular la lógica condicional en una función auxiliar para mantener el código limpio.

Ejemplo:

function obtenerMensaje(rol) {
  switch (rol) {
    case 'admin':
      return <h1>Bienvenido, Administrador.</h1>;
    case 'usuario':
      return <h1>Hola, Usuario!</h1>;
    default:
      return <h1>Invitado, por favor regístrate.</h1>;
  }
}

function Panel({ rol }) {
  return (
    <div>
      {obtenerMensaje(rol)}
    </div>
  );
}

En este ejemplo, el contenido mostrado dependerá del rol del usuario.

Buenas Prácticas

• Mantén el código legible. Si la condición es compleja, considera extraer la lógica en una función.
• Evita anidar muchos operadores ternarios, ya que puede dificultar la lectura.
• Utiliza el operador && para condiciones simples.

Conclusión

El renderizado condicional es una herramienta indispensable en React para crear interfaces dinámicas y reactivas. Dependiendo de la complejidad de la condición, puedes elegir entre el operador ternario, &&, estructuras if-else, o incluso funciones auxiliares. La clave está en mantener el código limpio y fácil de mantener.