Gjengivelse av lister med data i React

Når man arbeider med moderne webapplikasjoner, er det vanlig å vise samlinger av data mottatt fra backend. For å gjøre dette bruker vi map()-metoden. Inne i map()-metoden benytter 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 bruker 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 linje 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.

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

Nøkkel

Key er en viktig strengprop 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 at React kan identifisere hvilke elementer som må gjengis på nytt og opprettes på nytt 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.

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

La oss rette opp den forrige appen vår ved å bruke key-prop 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.