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, observamos la utilización del método map(). Nos 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 observar 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 garantizar una identidad estable de los elementos en 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.

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

Corrijamos nuestra aplicación anterior utilizando las props de 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 arreglo de datos.

Código completo de la aplicación: