Unike nøkler via id i React

I koden ovenfor la vi til ordningsnummeret til elementet i arrayen i attributtet key. Egentlig er denne praksisen dårlig og bør bare brukes i ytterste nødstilfelle.

Grunnen er at ved sortering av arrayen vil elementene få andre nøkler, og React vil ikke kunne korrekt spore forbindelsen mellom elementene i arrayen og de tilsvarende taggene.

En bedre praksis er å legge til en unik identifikator for hvert produkt, som vil bli brukt som nøkkel.

La oss i vår array legge til en egenskap id med nummeret til vårt produkt for hvert produkt:

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

Nå bruker vi denne id som nøkkel:

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