Unikalne klucze przez id w React

W powyższym kodzie do atrybutu key dodawaliśmy numer porządkowy elementu w tablicy. W rzeczywistości taka praktyka jest zła i należy jej używać tylko w ostateczności.

Chodzi o to, że przy sortowaniu tablicy elementy uzyskają inne klucze i React nie będzie w stanie prawidłowo śledzić związku między elementami tablicy a odpowiadającymi im tagami.

Lepszą praktyką będzie dodanie każdemu produktowi unikalnego identyfikatora, który i będzie używany jako klucz.

Dodajmy w naszej tablicy każdemu produktowi właściwość id z numerem naszego produktu:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

Teraz jako klucza użyjemy tego id:

jsxfunction App() {
  const res = prods.map(function(item) {
    return <p key={item.id}>
      <span>{item.name}</span>:
      <span>{item.cost}</span>
    </p>;
  });
  
  return <div>
    {res}
  </div>;
}