Bij het werken aan moderne webapplicaties is het gebruikelijk om verzamelingen van gegevens die van de backend zijn ontvangen, weer te geven. Hiervoor maken we gebruik van 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 extraheren en specifieke markup genereren op basis van de gegevens van elk item.

Volledige app-code:

Als we echter naar de console kijken, 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. Door het gebruik van keys wordt onnodige hercreatie van elementen voorkomen, wat leidt tot betere prestaties.

Opmerking

De key moet uniek zijn tussen naburige elementen. Deze moet constant blijven en niet in de loop van de tijd veranderen.

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: