Renderizado Condicional en React?
Una Guía Práctica

El renderizado condicional, es una técnica fundamental en React que te permite mostrar u ocultar elementos en función de ciertas condiciones. En este post, exploraremos cómo implementar el renderizado condicional de manera efectiva en tus aplicaciones React.

¿Qué es el Renderizado Condicional?

1. Renderizado Condicional con If/Else en JSX

function Saludo({ estaAutenticado }) {
  // Verificar si el usuario está autenticado
  if (estaAutenticado) {
    return <h1>Bienvenido de nuevo</h1>;
  } else {
    return <h1>Inicia sesión, por favor</h1>;
  }
}

export default Saludo;

En este ejemplo, creamos un componente Saludo que toma una prop llamada estaAutenticado. Dentro del componente, Luego verificamos si el usuario está autenticado utilizando una sentencia if-else.

1. Si estaAutenticado es true, el componente renderizará el mensaje "Bienvenido de nuevo".
2. Si estaAutenticado es false, el componente renderizará el mensaje "Inicia sesión, por favor".

2. Renderizado Condicional con Operador Ternario

Ejemplo #1

{estaAutenticado ? <h1>Bienvenido de nuevo</h1> : <h1>Inicia sesión, por favor</h1>}

Este ejemplo utiliza el operador ternario para mostrar "Bienvenido de nuevo" si estaAutenticado es true, de lo contrario muestra "Inicia sesión, por favor".

Ejemplo #2

const Saludar =(estaAutenticado)=> {
  return (
    <div>
      {estaAutenticado ? (
        <h1>Bienvenido de nuevo</h1>
      ) : (
        <h1>Inicia sesión, por favor</h1>
      )}
    </div>
  );
}
export default Saludar;

3. Sentencias Switch (poco usada)

const TipoMensaje = ({ tipo }) => {
  let mensaje;

  switch (tipo) {
    case 'error':
      mensaje = 'Ha ocurrido un error.';
      break;
    case 'advertencia':
      mensaje = 'Atención: esta es una advertencia.';
      break;
    case 'exito':
      mensaje = 'Operación completada con éxito.';
      break;
    default:
      mensaje = 'Mensaje no reconocido.';
  }

  return <div>{mensaje}</div>;
}

export default TipoMensaje;

En este ejemplo, TipoMensaje utiliza una sentencia switch para asignar un mensaje específico a la variable mensaje según el valor de tipo:

1. Si tipo es 'error', se asigna el mensaje 'Ha ocurrido un error.'.
2. Si tipo es 'advertencia', se asigna el mensaje 'Atención: esta es una advertencia.'.
3. Si tipo es 'exito', se asigna el mensaje 'Operación completada con éxito.'.
4. Si tipo no coincide con ninguno de los casos anteriores, se asigna el mensaje 'Mensaje no reconocido.'.

4. Renderizado condicional con React Hooks

const Example = (props) => {
  const [estaAutenticado, setEstaAutenticado] = useState(false);

  return (
    <div>
      {estaAutenticado ? <h1>¡Bienvenido de nuevo!</h1> : <h1>Por favor, inicia sesión.</h1>}
      <button onClick={() => setEstaAutenticado(!estaAutenticado)}>
        {estaAutenticado ? 'Cerrar sesión' : 'Iniciar sesión'}
      </button>
    </div>
  );
}

export default Example;

Esta función Example renderiza un mensaje de bienvenida si isLoggedIn es true (indicando que el usuario ha iniciado sesión) y un mensaje para iniciar sesión si isLoggedIn es false. Además, un botón permite cambiar el estado de isLoggedIn entre true y false, simulando el inicio y cierre de sesión.

5. Operadores Lógicos

const Example = (props) => {
  return (
    <div>
      {
        props.estaAutenticado ? 
        <h1>¡Bienvenido de nuevo!</h1> 
       :<h1>Por favor, inicia sesión.</h1>
      }
    </div>
  );
}

export default Example;

La función Example renderiza un mensaje de "¡Bienvenido de nuevo!" si la prop estaAutenticado es true, lo cual indica que el usuario ha iniciado sesión. Si estaAutenticado es false, muestra el mensaje "Por favor, inicia sesión".

¿Qué hay de malo en este código?

const ListaContactos = ({ contactos }) => {
  return (
    <div>
      <ul>
        {contactos.length &&
          contactos.map(contacto => (
            <li key={contacto.id}>
              {contacto.nombre} {contacto.telefono}
            </li>
          ))}
      </ul>
    </div>
  );
}

La función parece estar bien en términos de funcionalidad básica. Renderiza una lista de contactos con sus nombres y teléfonos si el array contactos no está vacío.

¿Que pasaría si contactos es un array vacío?

La expresión {contactos.length && ...} se evaluará como falso solo cuando contactos.length es 0. Esto significa que si contactos es un array vacío, la expresión se evaluará como falso y no se mostrará ningún elemento en la lista.

Solución #1

function ListaContactos({ contactos }) {
  return (
    <div>
      <ul>
        {
            contactos.map(contacto => (
                <li key={contacto.id}>
                    {contacto.nombre} {contacto.telefono}
                </li>
            ))
        }
      </ul>
    </div>
  );
}

De esta manera, la lista se renderizará correctamente incluso si contacts es un array vacío. Esto hace que el código sea más predecible y fácil de entender para otros desarrolladores que puedan revisarlo.

Solución #1

Soy muy consciente de que podríamos haber resuelto el problema de contactos usando !!contactos.length && ...o contactos.length > 0 && ...o incluso Boolean(contactos.length) && ..., pero prefiero ser explícito usando un ternario.

const ListaContactos = ({ contactos }) => {
  return (
    <div>
      <ul>
        {contactos.length
          ? contactos.map((contacto) => (
              <li key={contacto.id}>
                {contacto.nombre} {contacto.telefono}
              </li>
            ))
          : "No hay contactos"}
      </ul>
    </div>
  );
};

export default ListaContactos;

La función ListaContactos renderiza una lista de contactos con nombres y teléfonos si hay elementos en el array proporcionado como prop. Utiliza un operador ternario para realizar renderizado condicional y asigna claves únicas a cada elemento de la lista.

En conclusión

¡Gracias por leer este artículo, está hecho con mucho esfuerzo y amor!