Renderizado condicional

Tres formas, una misma idea

A veces quieres mostrar algo solo si se cumple una condición: un mensaje cuando el usuario está logueado, un badge si un producto está rebajado, un placeholder si no hay datos. Astro usa los mismos patrones de JavaScript que ya conoces.

1. El operador && (mostrar o nada)

Cuando solo quieres pintar algo si la condición es verdadera:

Si hayMensajes es false, no se renderiza nada.

⚠️ Cuidado con valores que no sean estrictamente booleanos. Por ejemplo, {cantidad && ...} con cantidad === 0 imprimiría 0 en pantalla. Para evitarlo, fuerza un boolean: {cantidad > 0 && ...}.

2. El operador ternario (uno u otro)

Cuando quieres elegir entre dos resultados:

Es la opción más legible cuando hay exactamente dos ramas.

3. Variables previas (cuando hay más casos)

Cuando hay varias ramas, calcula el resultado en el frontmatter:

O mejor: encapsula la lógica en un componente y delega.

Negación con !

Para "si NO se cumple", usa !:

Ojo con los strings vacíos y nullish

Estas dos reglas te ahorrarán bugs:

• "" y 0 y NaN son falsy → no se renderizan con &&.
• null y undefined no se imprimen literalmente, pero pueden ocultar errores.

Si quieres asegurar "muestra esto si hay valor":

Tu desafío 🚀

Abre src/pages/index.astro. Necesitas:

1. Declarar const isLoggedIn = true (luego prueba a poner false para ver el otro caso).
2. Declarar const usuario = "Ada" (o tu nombre).
3. Renderizar:
   • Si isLoggedIn es verdadero → <p>Hola, {usuario}</p>.
   • Si no → <p>Inicia sesión</p>.

Puedes usar un ternario {isLoggedIn ? ... : ...} o dos && separados. Lo importante es que cambies el valor de isLoggedIn y veas cómo cambia el resultado al recargar.