Afficher des listes

Afficher des données à partir de tableaux

Disons que vous avez une liste de contenus.

<ul>
  <li>Creola Katherine Johnson : mathématicienne</li>
  <li>Mario José Molina-Pasquel Henríquez : chimiste</li>
  <li>Mohammad Abdus Salam : physicien</li>
  <li>Percy Lavon Julian : chimiste</li>
  <li>Subrahmanyan Chandrasekhar : astrophysicien</li>
</ul>

La seule différence entre ces éléments de liste, c’est leur contenu, c’est-à-dire leurs données. Vous aurez souvent besoin d’afficher plusieurs instances d’un même composant mais avec des données différentes lorsque vous construirez des interfaces : listes de commentaires, galeries d’images de profils, etc. Dans de telles situations, vous pourrez stocker les données dans des objets et tableaux JavaScript et utiliser des méthodes comme map() et filter() pour produire des listes de composants à partir de ces données.

Voici un court exemple de génération d’une liste d’éléments à partir d’un tableau :

1. Déplacez les données dans un tableau

const people = [
  'Creola Katherine Johnson : mathématicienne',
  'Mario José Molina-Pasquel Henríquez : chimiste',
  'Mohammad Abdus Salam : physicien',
  'Percy Lavon Julian : chimiste',
  'Subrahmanyan Chandrasekhar : astrophysicien',
];

2. Transformez les membres de people en un nouveau tableau de nœuds JSX, listItems :

const listItems = people.map(person => <li>{person}</li>);

3. Renvoyez listItems à partir de votre composant, enrobé dans un <ul> :

return <ul>{listItems}</ul>;

Voici le résultat :

Remarquez l’erreur dans la console du bac à sable :

(« Avertissement : chaque enfant d’une liste devrait avoir une prop “key” unique », NdT.)

Vous apprendrez à corriger cette erreur plus loin dans cette page. Avant d’en arriver là, commençons par structurer un peu plus vos données.

Filtrer des tableaux d’éléments

On peut structurer davantage nos données.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathématicienne',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chimiste',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicien',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chimiste',
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicien',
}];

Disons que vous cherchez un moyen de n’afficher que les chimistes. Vous pouvez utiliser la méthode filter() de JavaScript pour ne renvoyer que ces personnes. Cette méthode s’applique sur un tableau d’éléments, les fait passer à travers un « prédicat » (une fonction qui renvoie true ou false au sujet de son argument), et renvoie un nouveau tableau ne contenant que les éléments qui ont satisfait le prédicat (il a renvoyé true pour ces éléments).

Vous ne vous intéressez qu’aux éléments dont la profession est 'chimiste'. Le prédicat correspondant ressemble à (person) => person.profession === 'chimiste'. Voici comment assembler tout ça :

1. Créez un nouveau tableau avec juste les chimistes, chemists, en appelant filter() sur people et en filtrant avec person.profession === 'chimiste' :

const chemists = people.filter(person =>
  person.profession === 'chimiste'
);

2. A présent transformez chemists avec map() :

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       célèbre pour {person.accomplishment}
     </p>
  </li>
);

3. Enfin, renvoyez le listItems depuis votre composant :

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // return implicite !
);

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

Maintenir l’ordre des éléments de liste avec key

Vous avez pu remarquer dans tous les bacs à sable ci-dessus une erreur dans la console :

(« Avertissement : chaque enfant d’une liste devrait avoir une prop “key” unique », NdT.)

Vous devez fournir à chaque élément de tableau une key — une chaîne de caractères ou un nombre qui identifie de façon unique cet élément au sein du tableau :

<li key={person.id}>...</li>

Les clés indiquent à React à quel élément du tableau de données correspond chaque élément du tableau de composants, pour qu’il puisse les faire correspondre plus tard. Ça devient important si les éléments de votre tableau sont susceptibles de s’y déplacer (par exemple dans le cadre d’un tri), d’y être insérés ou supprimés. Une key bien choisie aide React à inférer la nature exacte du changement, et à faire les mises à jour adaptées dans l’arbre DOM.

Plutôt que de générer vos clés à la volée, vous devriez les faire figurer dans vos données :

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Où récupérer la key

Selon la source de vos données, vous aurez différentes sources de clés :

• Données issues d’une base de données : si vos données viennent d’une base de données, vous pouvez utiliser les clés / ID de la base, qui sont uniques par nature.
• Données générées localement : si vos données sont générées et persistées localement (ex. une appli de prise de notes), utilisez un compteur incrémentiel, crypto.randomUUID() ou un module du style uuid en créant vos éléments.

Les règles des clés

• Les clés doivent être uniques dans une même liste. En revanche, vous pouvez avoir les mêmes clés pour des nœuds JSX dans des tableaux distincts.
• Les clés ne doivent pas changer sans quoi elles ne serviraient à rien ! Ne générez pas les clés lors du rendu.

Pourquoi React a-t-il besoin de clés ?

Imaginez que les fichiers sur votre bureau n’aient pas de noms. Vous y feriez alors référence plutôt par leur ordre : le premier fichier, le deuxième, et ainsi de suite. Vous pourriez vous y habituer, sauf que lorsque vous supprimez un fichier, un problème surgit. Le deuxième fichier devient le premier, le troisième devient le deuxième, etc.

Les noms de fichiers dans un dossier et les clés JSX dans un tableau jouent un rôle similaire. Ils nous permettent d’identifier de façon unique un élément parmi ceux qui l’entourent. Une clé bien choisie nous fournit plus d’information que la simple position dans le tableau. Même si la position change en raison d’un réordonnancement, la key permettra à React d’identifier l’élément tout au long de sa vie.