Renderizar listas y el papel de las keys

Convierte un array de datos en una lista de elementos en pantalla con map, e identifica cada elemento con keys.

8 min · 3 preguntas

Las interfaces están llenas de listas: mensajes en una conversación, productos en una tienda, canciones en una lista de reproducción... En lugar de copiar y pegar etiquetas a mano, partes de un array de datos y lo transformas con el método map. Recordatorio rápido: map aplica una función a cada elemento de un array y devuelve un nuevo array con los resultados.

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

En React, haces exactamente lo mismo, salvo que la función pasada a map devuelve JSX en lugar de una cadena de texto. React sabe mostrar un array de elementos JSX: los renderiza uno tras otro. El único requisito es darle a cada elemento una prop especial llamada key.

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

¿Para qué sirve key? Es una etiqueta única que permite a React reconocer cada elemento cuando la lista cambia (al añadir, eliminar, reordenar), como los tickets numerados de un guardarropa: sin número, no hay forma de devolver el abrigo correcto. Gracias a las keys, React solo actualiza lo que realmente ha cambiado. En la práctica, la mejor key es un identificador único y estable que provenga de tus datos, como un campo id.

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué método de array usas para renderizar una lista en React?
   • push
   • map
   • forEach
2. ¿Para qué sirve la prop key?
   • Para ordenar automáticamente la lista alfabéticamente
   • Para proteger la lista con una contraseña
   • Para permitir que React identifique cada elemento de la lista
3. ¿Cuál es el mejor valor para una key?
   • Un identificador único y estable que provenga de los datos
   • El índice del elemento en el array, en todos los casos
   • Un número aleatorio generado en cada render