Uniikit avaimet id:n kautta Reactissa

Yllä olevassa koodissa lisäsimme key-attribuuttiin elementin järjestysnumeron taulukossa. Itse asiassa tämä käytäntö on huonoa, ja sitä tulisi käyttää vain hätätapauksissa.

Asia on niin, että kun taulukkoa lajitellaan, elementeistä tulee toiset avaimet ja React ei pysty seuraamaan oikein taulukon elementtien ja vastaavien tagien välistä yhteyttä.

Parempi käytäntö olisi lisätä jokaiselle tuotteelle yksilöllinen tunniste, jota käytetään avaimena.

Lisätään taulukossamme jokaiselle tuotteelle id-ominaisuus tuotteen numerolla:

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

Käytämme nyt tätä id:tä avaimena:

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