Edinstveni ključi v matriki oznak v Reactu

V prejšnjem primeru smo oblikovali naše odstavke v zanki, takole:

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

To bo delovalo, vendar, če pogledamo v konzolo - bomo videli napako: Warning: Each child in an array or iterator should have a unique "key" prop. V tem primeru React zahteva, da vsaki oznaki iz zanke damo edinstveno številko, da bo React lažje delal s temi oznakami v prihodnje.

Ta številka se doda z uporabo atributa key. V tem primeru lahko kot številko vzamemo številko elementa v matriki. V našem primeru je ta številka shranjena v spremenljivki index in zato bo popravljena vrstica izgledala takole:

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

Zaženimo - napaka iz konzole bo izginila:

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

Še enkrat: ta atribut key ima servisni pomen za React, bolj poglobljeno boste razumeli to točko v naslednjih lekcijah. Za zdaj samo vedite: če vidite takšno napako - dodajte atribut key z edinstveno vrednostjo za vsako oznako in težava bo izginila.