export default function App() {
  const isLoggedIn = true;
  const isAdmin = true;

  return (
    <div>
      {/* Si isLoggedIn: muestra "Bienvenido", si no: muestra "Inicia sesión" */}

      {/* Si isAdmin: muestra un badge "Admin" */}
    </div>
  );
}

Renderizado condicional

Mostrar cosas... o no

En casi cualquier aplicación, necesitas mostrar cosas diferentes según el estado de la app. ¿El usuario está logueado? Muestra su perfil. ¿No lo está? Muestra el botón de login. ¿Hay un error? Muestra el mensaje de error.

A esto le llamamos renderizado condicional — decidir qué renderizar según una condición.

Técnica 1: El operador ternario

El ternario es perfecto cuando tienes dos opciones: muestra A o muestra B.

La sintaxis es: {condición ? <SiTrue /> : <SiFalse />}

Técnica 2: El operador &&

Cuando solo quieres mostrar algo o nada (sin alternativa), usa &&:

Si la condición es true, renderiza lo que hay después del &&. Si es false, no renderiza nada.

Cuidado con el gotcha del 0

Esto pasa porque 0 es falsy en JavaScript, pero React sí lo renderiza como texto. Usa siempre una comparación explícita.

Técnica 3: if/else antes del return

Cuando la lógica es más compleja, puedes usar if/else normal antes del return:

Esto se llama early return — si una condición se cumple, retornas inmediatamente sin llegar al resto del código.

¿Cuándo usar cada técnica?

¿No estás seguro? Usa este árbol de decisión:

Combinando técnicas

En la práctica, mezclas las técnicas según la situación:

Tu desafío 🚀

Tienes dos variables: isLoggedIn e isAdmin. Tu misión:

1. Si isLoggedIn es true, muestra "Bienvenido". Si no, muestra "Inicia sesión" (usa ternario)
2. Si isAdmin es true, muestra un badge "Admin" (usa &&)

Prueba cambiando los valores de las variables a true y false para ver cómo cambia la interfaz.

El renderizado condicional es lo que hace que tu interfaz sea dinámica. Ya no son páginas estáticas — son aplicaciones que reaccionan.