Renderizar Listas de Datos en React

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 a través de cada elemento en el arreglo, extraer su valor y generar un marcado específico basado en los datos de cada elemento.

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.

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.

Vamos a corregir nuestra aplicación anterior utilizando 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 arreglo de datos.