Unikke nøgler i array af tags i React

I det forrige eksempel dannede vi vores afsnit i en løkke, sådan her:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

Dette vil virke, men hvis vi kigger i konsollen - vil vi se en fejl: Warning: Each child in an array or iterator should have a unique "key" prop. I dette tilfælde kræver React, at vi giver hvert tag fra løkken et unikt nummer, så React har lettere ved at arbejde med disse tags senere.

Dette nummer tilføjes ved hjælp af attributten key. I dette tilfælde kan vi tage elementets indeks i arrayet som nummer. I vores tilfælde er dette nummer gemt i variablen index, hvilket betyder at den korrigerede linje vil se sådan ud:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

Lad os køre det - fejlen i konsollen forsvinder:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

Igen: denne attribut key har en funktionel betydning for React, du vil forstå dette punkt mere dybt i de følgende lektioner. For nu, vær bare opmærksom på: hvis du ser sådan en fejl - tilføj attributten key med en unik værdi for hvert tag, og problemet forsvinder.