Renderizado condicional en React

El renderizado condicional consiste en mostrar o no un contenido en función de una condición lógica o boolean.

En React, esto se logra utilizando estructuras de control normales de JavaScript, como if, else, operadores ternarios o lógicos, dentro del código JSX.

Sin embargo, dentro de las llaves {} del JSX solo podemos usar expresiones (código que devuelve un valor), por lo que no podemos usar sentencias de bloque como if o switch directamente ahí dentro.

Entonces, ¿cómo lo hacemos? Tenemos distintas opciones dependiendo del caso (como siempre, vamos).

El operador ternario ?

Dentro de las llaves {} de JSX no podemos meter un if/else (porque no devuelven nada)

Es perfecto para la lógica de “Una cosa u Otra”.

// Estructura: condición ? verdadero : falso

function PanelUsuario({ isLogged }) {
  return (
    <div>
      {isLogged ? (
        <button>Cerrar Sesión</button>
      ) : (
        <button>Iniciar Sesión</button>
      )}
    </div>
  );
}

El Operador AND &&

A veces no queremos mostrar “esto o esto”. A veces solo queremos mostrar un componente si la condición es verdadera, y si no, no mostrar nada.

Para esto, es muy común aprovechar el comportamiento de cortocircuito del operador lógico AND (&&).

Esto se aprovecha de que, en JavaScript,

• true && expresion evalúa a expresion
• false && expresion evalúa a false.

React es lo suficientemente listo para no renderizar nada si recibe un false, null o undefined, así que podemos usarlo como render condicional.

function Mensajes({ nuevosMensajes }) {
  return (
    <div>
      <h1>Buzón de entrada</h1>
      
      {/* Solo se muestra si hay mensajes */}
      {nuevosMensajes.length > 0 && (
        <span className="badge">
          Tienes mensajes sin leer
        </span>
      )}
    </div>
  );
}

const mensajes = []; // Array vacío, length es 0

// 0 && <Span> ... JavaScript devuelve 0
return <div>{mensajes.length && <span>Hay mensajes</span>}</div>

// Forma correcta: forzar booleano
{mensajes.length > 0 && <span>Hay mensajes</span>}
// O usando la doble negación
{!!mensajes.length && <span>Hay mensajes</span>}

Control de flujo con IF

Hemos dicho que no se puede usar if dentro del JSX. Pero sí podemos usarlo antes del return.

Por ejemplo, a veces queremos evitar renderizar el componente entero si falta algo. En estos casos, usamos if normales para cortar la ejecución. Esto se conoce como patrón de Early Return.

function PerfilUsuario({ usuario, isLoading }) {
  // 1. Si está cargando, devolvemos esto y terminamos
  if (isLoading) {
    return <div>Cargando perfil...</div>;
  }

  // 2. Si no hay usuario (es null), devolvemos error o nada
  if (!usuario) {
    return null; // Renderizar null hace que no se pinte nada en el DOM
  }

  // 3. Si llegamos aquí, tenemos datos y no estamos cargando
  return (
    <div className="perfil">
      <h1>{usuario.nombre}</h1>
      <p>{usuario.bio}</p>
    </div>
  );
}

Funciones de renderizado

Si necesitas una parte lógica compleja pero solo para una pequeña parte del componente (no para todo), la opción anterior no te podría obligar a duplicar mucho código. Mientras que los ternarios que habíamos visto, tienen a volverse ilegible si anidamos muchas.

Aquí la mejor práctica es extraer esa lógica a una función auxiliar. Al ser una función de JavaScript normal (fuera del JSX, de las {}), aquí sí podemos usar if, else o switch con normalidad.

function EstadoPedido({ estado }) {
  
  const renderIcono = () => {
    switch(estado) {
      case 'enviado': return <IconoCamion />;
      case 'entregado': return <IconoCheck />;
      case 'cancelado': return <IconoCruz />;
      default: return <IconoReloj />;
    }
  };

  return (
    <div className="tarjeta-pedido">
      {/* Llamamos a la función para obtener el JSX resultante */}
      {renderIcono()}
      <span>Estado: {estado}</span>
    </div>
  );
}