Listas y keys: renderizar arrays de datos

Tus datos casi nunca vienen de uno en uno: son LISTAS —un array de gastos, de usuarios, de mensajes—. Renderizarlas en React es tan simple como un .map() que devuelve JSX, con un detalle que confunde a todos al principio: la prop key. Hoy dominas el patrón que usarás en literalmente cada app de React.

De array a UI, con map

El patrón: map dentro de JSX

Dentro de {}, un .map() que devuelve JSX por cada elemento renderiza la lista completa:

El {gastos.map((g) => <li key={g.id}>...</li>)} recorre el array y produce un <li> por gasto —React pinta todos—. Es tu .map() de siempre, devolviendo JSX en vez de valores. Fíjate en el key={g.id}: esa prop especial es la que hace que todo funcione bien, y es la que más se malentiende.

La prop key: la identidad de cada elemento

La trampa del índice como key

El error más común: usar el índice del array como key. Funciona… hasta que la lista cambia de orden o se borra un elemento del medio:

// ❌ el índice como key: frágil si la lista se reordena o se borran items
{gastos.map((g, indice) => (
<li key={indice}>{g.nombre}</li>
))}
// problema: si borras el gasto 0, el que era índice 1 pasa a ser índice 0,
// y React cree que es "el mismo" elemento que cambió de contenido → bugs de
// estado, inputs que conservan valores equivocados, animaciones cruzadas.

// ✅ una key ESTABLE que viaja con el dato (su id):
{gastos.map((g) => (
<li key={g.id}>{g.nombre}</li>
))}

La regla: usa un ID ESTABLE que pertenezca al dato (g.id), no el índice. El índice cambia cuando la lista se reordena o se borra algo del medio, y entonces React empareja mal los elementos —causando bugs sutiles con el estado y los inputs—. Si tus datos no tienen id, genera uno al crearlos (como el Date.now() del SC-02). Solo usa el índice si la lista es ESTÁTICA y nunca cambia de orden.

Mini-reto

Renderiza datos reales: 1) crea un array de objetos usuario con id, nombre y edad; 2) renderízalos con .map() en una lista, usando key={usuario.id} y un componente <TarjetaUsuario> por cada uno (props tipadas); 3) agrega debajo un <p> con el promedio de edad calculado con reduce. Practica el flujo array → UI que usarás sin parar.

Qué sigue

Tu UI ya muestra listas de datos. Pero una interfaz sin interacción es un póster. La próxima lección le da vida: los EVENTOS —clics, cambios en inputs— y cómo un componente responde a ellos y avisa hacia arriba. El principio de las apps que reaccionan al usuario.