Lors du développement d'applications web modernes, il est courant d'afficher des collections de données reçues du backend. Pour cela, nous utilisons la méthode map(). À l'intérieur de la méthode map(), nous employons une fonction de rappel et retournons du JSX pour 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, nous observons 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 l'avertissement suivant : 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 aux éléments d'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 de clés évite la recréation inutile des éléments, ce qui améliore les performances.

Remarque

La clé doit être unique parmi les éléments voisins. Elle doit rester constante et ne pas changer au fil du temps.

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 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 :