Unika nycklar i array av taggar i React

I föregående exempel skapade vi våra stycken i en loop, så här:

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

Detta kommer att fungera, men om vi tittar i konsolen - kommer vi att se ett fel: Warning: Each child in an array or iterator should have a unique "key" prop. I det här fallet kräver React att vi ger varje tagg från loopen ett unikt nummer, så att React lättare kan arbeta med dessa taggar i framtiden.

Detta nummer läggs till med hjälp av attributet key. I det här fallet kan vi ta elementets index i arrayen som nummer. I vårt fall lagras detta nummer i variabeln index och därför kommer den korrigerade raden att se ut så här:

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

Låt oss köra - felet i konsolen kommer att försvinna:

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

Återigen: detta attribut key har ett funktionellt värde för React, du kommer att förstå denna punkt mer ingående i de följande lektionerna. Tills vidare, bara kom ihåg: om du ser ett sådant fel - lägg till attributet key med ett unikt värde för varje tagg och problemet kommer att försvinna.