Clés uniques via id dans React

Dans le code ci-dessus, dans l'attribut key nous ajoutions le numéro d'ordre de l'élément dans le tableau. En réalité, cette pratique est mauvaise et ne devrait être utilisée qu'en dernier recours.

Le problème est que lors du tri du tableau, les éléments auront d'autres clés et React ne pourra pas suivre correctement le lien entre les éléments du tableau et les balises correspondantes.

Une meilleure pratique consiste à ajouter à chaque produit un identifiant unique, qui sera utilisé comme clé.

Ajoutons dans notre tableau à chaque produit une propriété id avec le numéro de notre produit :

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

Maintenant, utilisons cet id comme clé :

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