Rendu d'une Collection de Données

Lors de la création d'applications web modernes, il est courant de rendre des collections de données reçues du backend. Pour ce faire, nous utilisons la méthode map(). Dans la méthode map(), nous employons une fonction de rappel et retournons du JSX pour rendre le résultat souhaité.

Prenons un exemple pour illustrer comment cela fonctionne. Nous aurons un composant App qui passera la prop toys, un tableau d'objets. Le composant ToyCard utilisera la méthode map() pour rendre chaque jouet dans le tableau.

Aux lignes 13-15, nous observons l'utilisation de la méthode map(). Elle nous permet d'itérer à travers chaque élément du tableau, d'extraire sa valeur et de générer un balisage spécifique basé sur les 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 prop de chaîne cruciale 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 pour les éléments au sein d'une collection. Ces clés permettent à React d'identifier quels éléments doivent être re-rendus et recréés lorsque des changements se produisent, plutôt que de recréer l'ensemble de la collection. L'utilisation de clés empêche la recréation inutile d'é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 couramment recommandé d'utiliser des identifiants, tels que les valeurs id des données backend, comme props de clé. Cette pratique permet à React d'identifier et de gérer efficacement les éléments individuels au sein d'une collection.

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

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 :