Mostrar el contenido de un array

Para mostrar varios elementos a partir de datos utilizamos map. Este método recorre un array y devuelve otro array con el resultado de transformar cada elemento. En React el resultado puede ser una lista de elementos JSX.

1const nombres = ['Antonio', 'Pepe', 'Isabel', 'Ángel'];
2
3export default function Ejem_11() {
4  return (
5    <ul>
6      {nombres.map((nombre) => (
7        <li key={nombre}>{nombre.toUpperCase()}</li>
8      ))}
9    </ul>
10  );
11}

El resultado son cuatro elementos li. toUpperCase() calcula el texto visible y no modifica las cadenas del array original.

Para qué sirve key #

Cada elemento de una lista debe tener una clave que lo identifique entre sus hermanos. React la utiliza para reconocer qué elemento sigue siendo el mismo cuando cambia el orden o se añaden o eliminan filas.

En este ejemplo los nombres son únicos y pueden servir de clave. En datos reales utiliza un identificador estable:

1const personas = [
2  { id: 'p1', nombre: 'Ana' },
3  { id: 'p2', nombre: 'Ana' },
4];
5
6function ListaPersonas() {
7  return (
8    <ul>
9      {personas.map((persona) => (
10        <li key={persona.id}>{persona.nombre}</li>
11      ))}
12    </ul>
13  );
14}

Aunque los nombres coincidan, los identificadores permiten distinguir las filas. La clave debe ponerse en el elemento que devuelve directamente map.

Evitar claves inestables #

El índice de map representa una posición. Usarlo como key puede mezclar estado de filas si insertas, eliminas o reordenas elementos. Resérvalo para listas realmente estáticas sin identidad propia. Tampoco uses Math.random() para crear claves durante el render: cambiarían en cada render.

key es una indicación para React, no una prop normal que el hijo recibe. Si el hijo necesita el identificador, pásalo también en una prop propia.

Prueba tú #

Añade otra persona llamada Ana con un id distinto. Después invierte el orden del array y comprueba que las claves siguen representando a las mismas personas.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.