Lors du développement d'applications web modernes, il est courant d'afficher des collections de données reçues du backend. Pour ce faire, nous utilisons la méthode map(). À l'intérieur de la méthode map(), nous employons une fonction de rappel et retournons du JSX afin d'afficher le résultat souhaité.

Prenons un exemple pour illustrer ce fonctionnement. Nous aurons un composant App qui transmettra la prop toys, un tableau d'objets. Le composant ToyCard utilisera la méthode map() pour afficher chaque jouet du tableau.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Aux lignes 13 à 15, on observe l'utilisation de la méthode map(). Celle-ci permet d'itérer sur chaque élément du tableau, d'extraire sa valeur et de générer un balisage spécifique en fonction des données de chaque élément.

Code complet de l'application :

Cependant, si nous prêtons attention à la console, nous pouvons constater que nous recevons l'avertissement : Each child in a list should have a unique "key" prop..

Clé

La clé est une propriété de type chaîne de caractères essentielle qui doit être attribuée lors de la création d’éléments au sein d’une collection.

React utilise les clés pour garantir une identité stable des éléments dans une collection. Ces clés permettent à React d’identifier quels éléments doivent être re-rendus et recréés lors de modifications, plutôt que de recréer l’ensemble de la collection. L’utilisation des clés évite la recréation inutile des éléments, ce qui améliore les performances.

Il est généralement recommandé d'utiliser des identifiants, tels que les valeurs id provenant des données du backend, comme props key. Cette pratique permet à React d'identifier et de gérer efficacement chaque élément individuel au sein d'une collection.

Corrigeons notre application précédente en utilisant les props key pour les éléments :

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Ligne 14 : la prop key est définie sur l'élément qui sera rendu plusieurs fois dans un tableau de données.

Code complet de l'application :