Al trabajar en aplicaciones web modernas, es común renderizar colecciones de datos recibidos desde el backend. Para lograr esto, utilizamos el método map(). Dentro del método map(), empleamos una función de devolución de llamada y retornamos JSX para renderizar la salida deseada.

Veamos un ejemplo para ilustrar cómo funciona. Tendremos un componente App que pasará la prop toys, un arreglo de objetos. El componente ToyCard utilizará el método map() para renderizar cada juguete en el arreglo.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

En las líneas 13-15, se observa la utilización del método map(). Este permite iterar sobre cada elemento del arreglo, extraer su valor y generar un marcado específico basado en los datos de cada elemento.

Código completo de la aplicación:

Sin embargo, si prestamos atención a la consola, podemos notar que aparece la advertencia: Each child in a list should have a unique "key" prop..

Key

La key es una propiedad de tipo string fundamental que debe asignarse al crear elementos dentro de una colección.

React utiliza las keys para asegurar una identidad estable de los elementos dentro de una colección. Estas keys permiten a React identificar qué elementos deben ser renderizados nuevamente y cuáles deben ser recreados cuando ocurren cambios, en lugar de recrear toda la colección. El uso de keys evita la recreación innecesaria de elementos, lo que mejora el rendimiento.

Nota

La key debe ser única entre los elementos vecinos. Debe permanecer constante y no cambiar con el tiempo.

Se recomienda comúnmente utilizar identificadores, como los valores de id provenientes de los datos del backend, como props clave. Esta práctica permite que React identifique y gestione eficazmente los elementos individuales dentro de una colección.

Arreglemos nuestra aplicación anterior usando las props clave para los elementos:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Línea 14: la prop key se establece en el elemento que se renderizará varias veces dentro de un array de datos.

Código completo de la aplicación: