Renderizado de listas

La operación más común

Mostrar una lista de cosas es probablemente lo que más vas a hacer en tu vida web: posts en un blog, productos en una tienda, mensajes en un chat, items en un menú. En Astro la fórmula es siempre la misma: un array y un .map().

El patrón

Tres ideas clave:

1. El array vive en el frontmatter (o llega ahí por fetch, import, etc.).
2. El .map() va dentro de llaves {} en el HTML.
3. La función del .map devuelve JSX-like: etiquetas con expresiones.

¿Llaves o no llaves dentro del map?

Si el callback es una expresión (sin return explícito), envuelve la JSX en paréntesis:

Si necesitas lógica antes de devolver, usa llaves y return:

Listas de objetos

Lo habitual es trabajar con arrays de objetos:

¿Y la key?

A diferencia de React, Astro no necesita key en el JSX-like del template. El motivo es que el HTML se renderiza una sola vez (en build o en server) y no hay reconciliación de virtual DOM.

Si más adelante usas un componente de framework (React, Vue, Solid...) como una isla, ahí sí aplica la regla del framework correspondiente.

Filtrar y ordenar

Puedes encadenar .filter, .sort, .slice antes de .map:

Recuerda: todo eso ocurre en build/server. El navegador no ejecuta nada.

Tu desafío 🚀

Abre src/pages/index.astro. Tu trabajo:

1. En el frontmatter, declara un array tareas con al menos 3 strings (las cosas que quieres hacer hoy).
2. Dentro del <ul>, escribe {tareas.map((t) => <li>{t}</li>)} para imprimir cada una.
3. Bonus: filtra para que solo se muestren las que empiezan por una letra concreta, o convierte cada string a mayúsculas con t.toUpperCase().

Cuando funcione, mira el HTML resultante en el preview: verás los <li> ya pintados, sin rastro del .map.