Listes et Clés React : Afficher des Listes Dynamiques

Introduction

Dans React, vous aurez souvent besoin d'afficher plusieurs composants similaires à partir d'une collection de données. Vous pouvez utiliser les méthodes de tableau de JavaScript, comme map(), pour manipuler un tableau de données et le transformer en un tableau d'éléments JSX.

Une "key" est un attribut de chaîne de caractères spécial que vous devez inclure lors de la création de listes d'éléments. Les clés aident React à identifier quels éléments ont changé, ont été ajoutés ou supprimés. Cela permet à React de mettre à jour l'interface utilisateur de manière efficace.

Dans ce laboratoire, vous apprendrez à prendre un tableau de données, à le transformer en une liste de composants, et à le rendre, tout en comprenant le rôle essentiel de la prop key.

Créer un tableau d'éléments dans le composant

Dans cette étape, vous commencerez par définir les données que vous souhaitez afficher sous forme de liste. Dans la plupart des applications, ces données proviendraient d'une API ou d'une base de données, mais pour ce laboratoire, nous allons définir un simple tableau directement dans notre composant.

Tout d'abord, assurez-vous d'être dans le bon répertoire. Votre application React my-app a été créée dans le répertoire /home/labex/project.

En utilisant l'explorateur de fichiers sur le côté gauche de l'IDE Web, ouvrez le fichier my-app/src/App.jsx.

À l'intérieur de la fonction du composant App, avant l'instruction return, définissez une constante nommée products qui sera un tableau de chaînes de caractères.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

À ce stade, le tableau est défini mais pas encore rendu. L'étape suivante vous montrera comment afficher ces données.

Mapper le tableau vers des éléments JSX avec la méthode map

Dans cette étape, vous utiliserez la méthode map() de JavaScript pour transformer votre tableau products en une liste d'éléments JSX. La méthode map() crée un nouveau tableau en appelant une fonction sur chaque élément du tableau d'origine.

Nous allons mapper chaque chaîne de produit à un élément <li> (élément de liste).

Modifiez votre fichier src/App.jsx. À l'intérieur de l'instruction return, intégrez la logique de mappage entre accolades {}.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Maintenant, installons les dépendances du projet et démarrons le serveur de développement pour voir le résultat.

Ouvrez un nouveau terminal dans l'IDE Web. Tout d'abord, naviguez vers le répertoire de votre projet :

cd my-app

Ensuite, installez les dépendances :

npm install

Enfin, démarrez le serveur de développement. Les drapeaux --host et --port sont nécessaires pour rendre l'application accessible dans l'environnement LabEx.

npm run dev -- --host 0.0.0.0 --port 8080

Une fois le serveur démarré, basculez vers l'onglet Web 8080 de votre interface LabEx. Vous devriez voir votre liste de produits. Cependant, si vous ouvrez la console du développeur du navigateur (clic droit -> Inspecter -> Console), vous verrez un avertissement : Warning: Each child in a list should have a unique "key" prop. Nous corrigerons cela à l'étape suivante.

Avertissement de la console du développeur concernant la prop key manquante

Attribuer la prop 'key' unique à chaque élément de liste

Dans cette étape, vous allez corriger l'avertissement de la console en fournissant une key unique à chaque élément de liste. Les clés sont cruciales pour que React puisse suivre l'identité de chaque élément, ce qui permet de ré-rendre efficacement la liste lorsque les données changent.

La meilleure façon de choisir une clé est d'utiliser une chaîne de caractères qui identifie de manière unique un élément de liste parmi ses frères et sœurs. Le plus souvent, vous utiliseriez les identifiants (IDs) de vos données.

Modifions nos données pour qu'elles soient un tableau d'objets, où chaque objet possède un id unique. Mettez à jour src/App.jsx comme suit. Nous utiliserons l'id de chaque produit comme sa clé.

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Remarquez la prop key={product.id} ajoutée à l'élément <li>. La clé est une prop spéciale qui est utilisée par React en interne et n'est pas transmise à votre composant.

Après avoir enregistré le fichier, vérifiez à nouveau l'onglet Web 8080 et la console du développeur. La liste devrait s'afficher comme précédemment, mais l'avertissement concernant les clés manquantes aura disparu.

Utiliser l'index comme clé si aucun ID unique n'est disponible

Dans cette étape, vous apprendrez comment gérer les situations où vos données ne possèdent pas d'identifiants uniques et stables. Dans de tels cas, vous pouvez utiliser l'index de l'élément dans le tableau comme solution de dernier recours.

La fonction map() fournit l'index de l'élément courant comme second argument optionnel. Vous pouvez utiliser cet index pour la clé.

Revenons à notre tableau products qui est un simple tableau de chaînes de caractères et utilisons l'index comme clé. Modifiez src/App.jsx :

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Note importante : L'utilisation de l'index comme clé n'est pas recommandée si l'ordre des éléments est susceptible de changer. Cela peut avoir un impact négatif sur les performances et causer des problèmes avec l'état des composants. Si vous triez, ajoutez ou supprimez des éléments de la liste, les index changeront, ce qui peut perturber l'algorithme de rendu de React. Utilisez-le uniquement si la liste est statique et ne sera jamais réordonnée.

Rendre la liste mappée à l'intérieur d'une balise ul ou ol

Dans cette étape, vous allez encapsuler vos éléments de liste dans une balise <ul> (liste non ordonnée) ou <ol> (liste ordonnée). Ceci est important pour créer un HTML sémantiquement correct, ce qui est bénéfique pour l'accessibilité et le SEO.

Actuellement, nous affichons une série d'éléments <li> directement à l'intérieur d'un fragment (<>...</>). Encapsulons notre variable listItems dans une balise <ul> pour créer une liste non ordonnée appropriée.

Mettez à jour votre src/App.jsx avec le code final :

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

Retournez maintenant à l'onglet Web 8080. Vous verrez que votre liste est maintenant correctement formatée avec des puces, comme attendu d'un élément <ul> HTML standard. Vous avez réussi à afficher une liste dynamique dans React avec des clés correctes et un HTML sémantique.

Liste React rendue comme une liste HTML non ordonnée

Résumé

Félicitations pour avoir terminé le laboratoire !

Dans ce laboratoire, vous avez appris les concepts fondamentaux de l'affichage de listes dans React. Vous avez pratiqué :

La définition d'un tableau de données au sein d'un composant.
L'utilisation de la méthode map() pour transformer un tableau de données en un tableau d'éléments JSX.
L'importance cruciale de la prop key pour les éléments de liste afin d'aider React à un rendu efficace.
Comment utiliser des identifiants stables et uniques de vos données comme clés.
Comment utiliser l'index du tableau comme clé en dernier recours et les inconvénients potentiels de cette approche.
L'encapsulation de vos éléments de liste dans <ul> ou <ol> pour un HTML sémantique.

Ces compétences sont essentielles pour construire des applications dynamiques et pilotées par les données avec React.