Bij het ontwikkelen van moderne webapplicaties is het gebruikelijk om verzamelingen van gegevens die van de backend zijn ontvangen, weer te geven. Hiervoor gebruiken we de map()-methode. Binnen de map()-methode gebruiken we een callbackfunctie en retourneren we JSX om de gewenste uitvoer te renderen.

Laten we een voorbeeld bekijken om te illustreren hoe dit werkt. We hebben een App-component die de prop toys doorgeeft, een array van objecten. De ToyCard-component gebruikt de map()-methode om elk speelgoed in de array weer te geven.

// 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} />
  </>
);

In regels 13-15 zien we het gebruik van de map()-methode. Hiermee kunnen we door elk item in de array itereren, de waarde ervan ophalen en specifieke markup genereren op basis van de gegevens van elk item.

Volledige app-code:

Als we echter op de console letten, zien we de waarschuwing: Each child in a list should have a unique "key" prop..

Key

De key is een essentiële string-prop die moet worden toegekend bij het aanmaken van elementen binnen een collectie.

React gebruikt keys om een stabiele identiteit voor elementen binnen een collectie te waarborgen. Deze keys stellen React in staat te bepalen welke elementen opnieuw gerenderd en aangemaakt moeten worden wanneer er wijzigingen optreden, in plaats van de gehele collectie opnieuw te creëren. Het gebruik van keys voorkomt onnodige hercreatie van elementen, wat leidt tot betere prestaties.

Het is algemeen aanbevolen om identificatoren, zoals id-waarden uit backenddata, te gebruiken als key-props. Deze praktijk stelt React in staat om individuele elementen binnen een collectie effectief te identificeren en te beheren.

Laten we onze vorige app verbeteren door de key-props voor de items te gebruiken:

// 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} />
  </>
);

Regel 14: de key-prop wordt ingesteld op het element dat meerdere keren wordt gerenderd binnen een array van data.

Volledige app-code: