Når man arbeider med moderne webapplikasjoner, er det vanlig å vise samlinger av data mottatt fra backend. For å oppnå dette benytter vi map()-metoden. Inne i map()-metoden bruker vi en callback-funksjon og returnerer JSX for å vise ønsket resultat.

La oss ta et eksempel for å illustrere hvordan dette fungerer. Vi har en App-komponent som sender prop-en toys, et array av objekter. ToyCard-komponenten benytter map()-metoden for å vise hver leke 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} />
  </>
);

I linjene 13-15 ser vi bruk av map()-metoden. Den lar oss iterere gjennom hvert element i arrayet, hente ut verdien, og generere spesifikk markup basert på dataene til hvert element.

Full app-kode:

Hvis vi derimot følger med på konsollen, kan vi se at vi får advarselen: Each child in a list should have a unique "key" prop..

Nøkkel

Nøkkel er en avgjørende streng-prop som må tildeles når man oppretter elementer i en samling.

React bruker nøkler for å sikre en stabil identitet for elementer i en samling. Disse nøklene gjør det mulig for React å identifisere hvilke elementer som må re-rendres og re-opprettes når endringer skjer, i stedet for å gjenskape hele samlingen. Bruk av nøkler forhindrer unødvendig gjenskapelse av elementer, noe som gir bedre ytelse.

Merk

Nøkkelen må være unik blant nærliggende elementer. Den skal forbli konstant og ikke endres over tid.

Det anbefales ofte å bruke identifikatorer, som id-verdier fra backend-data, som key-props. Denne praksisen gjør at React effektivt kan identifisere og håndtere individuelle elementer i en samling.

La oss rette opp vår forrige app ved å bruke key-props for elementene:

// 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-propen settes på elementet som skal rendres flere ganger i en array med data.

Full app-kode: