Når man arbejder med moderne webapplikationer, er det almindeligt at gengive samlinger af data modtaget fra backend. For at opnå dette benytter vi map()-metoden. Inden for map()-metoden anvender vi en callback-funktion og returnerer JSX for at gengive det ønskede output.

Lad os tage et eksempel for at illustrere, hvordan det fungerer. Vi har en App-komponent, der videregiver proppen toys, et array af objekter. ToyCard-komponenten benytter map()-metoden til at gengive hver legetøj i arrayet.

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

På linje 13-15 ser vi brugen af map()-metoden. Den gør det muligt at iterere gennem hvert element i arrayet, udtrække dets værdi og generere specifik markup baseret på dataene for hvert element.

Fuld app-kode:

Hvis vi dog kigger i konsollen, kan vi se, at vi får advarslen: Each child in a list should have a unique "key" prop..

Nøgle

Nøgle er en afgørende streng-prop, der skal tildeles ved oprettelse af elementer i en samling.

React bruger nøgler til at sikre en stabil identitet for elementer i en samling. Disse nøgler gør det muligt for React at identificere, hvilke elementer der skal gen-rendres og genoprettes, når der sker ændringer, i stedet for at genskabe hele samlingen. Brug af nøgler forhindrer unødvendig genskabelse af elementer, hvilket fører til forbedret ydeevne.

Bemærk

Nøglen skal være unik blandt nærliggende elementer. Den skal forblive konstant og ikke ændre sig over tid.

Det anbefales ofte at anvende identifikatorer, såsom id-værdier fra backend-data, som key-props. Denne praksis gør det muligt for React effektivt at identificere og håndtere individuelle elementer i en samling.

Lad os rette vores tidligere app ved at bruge key-props for elementerne:

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

Linje 14: key-proppen sættes på det element, der skal gengives flere gange inden for et array af data.

Fuld app-kode: