Renderizar listas con .map() y key

De un array a una lista de elementos

Casi cualquier interfaz real muestra colecciones: una lista de tareas, los resultados de una búsqueda, los comentarios de un post. En React no existe un bucle especial dentro del JSX: usas el método .map() de los arrays para transformar cada dato en un elemento JSX.

function ListaCompra() {
  const productos = ["Pan", "Leche", "Huevos"];
  return (
    <ul>
      {productos.map((producto) => (
        <li>{producto}</li>
      ))}
    </ul>
  );
}

.map() devuelve un nuevo array, esta vez de elementos <li>, y React sabe pintar un array de elementos uno tras otro. Fíjate en que el .map() va entre llaves { }: es una expresión de JavaScript incrustada en el JSX.

La prop key

Si ejecutas el código anterior, React mostrará un aviso en consola:

Warning: Each child in a list should have a unique "key" prop.

Cada elemento de una lista necesita una prop especial llamada key: un identificador único y estable dentro de esa lista.

<ul>
  {productos.map((producto) => (
    <li key={producto}>{producto}</li>
  ))}
</ul>

¿Para qué sirve la key?

La key ayuda a React a identificar cada elemento entre renderizados. Cuando la lista cambia (se añade, borra o reordena un elemento), React compara las keys para saber qué elemento es cuál y actualizar solo lo necesario, en lugar de volver a crear toda la lista. Esto mejora el rendimiento y evita errores sutiles (por ejemplo, que el texto de un <input> salte a otra fila).

Una buena key:

• Es única entre los hermanos de la misma lista (no tiene que ser única en toda la app).
• Es estable: el mismo dato debe tener siempre la misma key. Lo ideal es un id que venga de tus datos (tarea.id, usuario.id...).

¿Y el índice del .map()?

.map() te ofrece el índice como segundo argumento:

{productos.map((producto, indice) => (
  <li key={indice}>{producto}</li>
))}

Usar el índice como key es tentador, pero es frágil: si la lista se reordena, se filtra o se insertan/borran elementos en medio, el índice de cada dato cambia, y React puede confundir las filas. Solo es aceptable cuando la lista es estática (no cambia de orden ni de tamaño) y no tienes un id mejor.