Quelle propriété obligatoire chaque élément doit-il avoir lors du rendu d'une liste en React ? D'où peut-on prendre les clés et d'où ne peut-on pas ?

Lors du rendu d'une liste dans React, chaque élément doit obligatoirement avoir la propriété key. Cela aide React à mettre à jour et à rerender uniquement les éléments modifiés de la liste.

D'où obtenir les clés :

• Il est préférable d'utiliser des identifiants uniques et stables issus des données, par exemple, id de la base de données.
• Vous pouvez également utiliser des chaînes ou des nombres uniques qui ne changent pas entre les rendus.

À éviter :

• Il n'est pas recommandé d'utiliser l'indice du tableau comme clé, surtout si l'ordre des éléments peut changer, car cela peut entraîner une mise à jour incorrecte des composants.

Exemple :

const items = [{id: 'a1', name: 'Item 1'}, {id: 'b2', name: 'Item 2'}];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);