Unikalne klucze w tablicy tagów w React

W poprzednim przykładzie tworzyliśmy nasze akapity w pętli, w ten sposób:

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

To będzie działać, jednak jeśli zajrzymy do konsoli - zobaczymy błąd: Warning: Each child in an array or iterator should have a unique "key" prop. W tym przypadku React wymaga, aby każdemu tagowi z pętli nadać unikalny numer, aby React miał łatwiej pracować z tymi tagami w przyszłości.

Ten numer jest dodawany za pomocą atrybutu key. W tym przypadku jako numer możemy wziąć numer elementu w tablicy. W naszym przypadku ten numer jest przechowywany w zmiennej index i oznacza to, że poprawiona linia będzie wyglądać tak:

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

Uruchommy - błąd z konsoli zniknie:

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

Jeszcze raz: ten atrybut key ma służebne znaczenie dla React, głębiej zrozumiesz ten moment w kolejnych lekcjach. Na razie po prostu wiedz: jeśli widzisz taki błąd - dodaj atrybut key z unikalną dla każdego tagu wartością i problem zniknie.