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 holder øje med konsollen, kan vi se, at vi får advarslen: Each child in a list should have a unique "key" prop..

Nøgle

Key er en afgørende streng-prop, der skal tildeles, når der oprettes 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-renders og genskabes, 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.

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 angives på det element, der skal gengives flere gange inden for et array af data.

Fuld app-kode: