Renderizado condicional

Mostrar cosas según una condición

A menudo quieres pintar algo solo si se cumple una condición: un mensaje de error, un spinner mientras carga, un saludo si el usuario ha iniciado sesión. Como el JSX vive dentro de JavaScript, usas las herramientas de siempre.

El operador &&

El patrón más común para "muestra esto solo si la condición es cierta":

function Bandeja({ noLeidos }) {
  return (
    <div>
      <h1>Bandeja de entrada</h1>
      {noLeidos > 0 && <p>Tienes {noLeidos} mensajes sin leer</p>}
    </div>
  );
}

Si la condición es true, se evalúa y se pinta la parte derecha. Si es false, React no renderiza nada (ignora los valores false, null y undefined).

Cuidado con el 0: {lista.length && <Lista/>} pintaría un 0 en pantalla cuando la lista está vacía, porque 0 no es true pero tampoco se ignora. Usa una condición booleana clara: {lista.length > 0 && <Lista/>}.

El operador ternario ? :

Cuando quieres elegir entre dos alternativas ("esto o lo otro"), usa el ternario condicion ? siVerdadero : siFalso:

function Acceso({ logueado }) {
  return (
    <p>{logueado ? "Hola de nuevo" : "Inicia sesión"}</p>
  );
}

También puedes devolver elementos completos en cada rama:

{logueado ? <Perfil /> : <Login />}

Devolver null para no renderizar nada

Un componente que devuelve null no pinta absolutamente nada. Es útil para ocultar un componente entero según una condición:

function Aviso({ visible, texto }) {
  if (!visible) return null;
  return <div className="aviso">{texto}</div>;
}

Devolver null es perfectamente válido y no es un error: simplemente le dice a React que ahí no hay nada que mostrar.