Afficher des listes et le rôle des keys

Transformez un tableau de données en liste d'éléments à l'écran avec map, et identifiez chaque élément grâce aux keys.

8 min · 3 questions

Les interfaces sont remplies de listes : messages d'une conversation, produits d'une boutique, titres d'une playlist... Plutôt que de copier-coller des balises à la main, on part d'un tableau de données et on le transforme avec la méthode map. Petit rappel : map applique une fonction à chaque élément d'un tableau et retourne un nouveau tableau avec les résultats.

const fruits = ["pomme", "banane", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

En React, on fait exactement pareil, mais la fonction passée à map retourne du JSX au lieu d'un texte. React sait afficher un tableau d'éléments JSX : il les rend les uns après les autres. Seule obligation : donner à chaque élément une prop spéciale nommée key.

function FruitList() {
  const fruits = ["pomme", "banane", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

À quoi sert key ? C'est une étiquette unique qui permet à React de reconnaître chaque élément quand la liste change (ajout, suppression, réordonnancement), comme les tickets numérotés d'un vestiaire : sans numéro, impossible de rendre le bon manteau. Grâce aux keys, React ne met à jour que ce qui a réellement changé. En pratique, la meilleure key est un identifiant unique et stable venu de vos données, comme un champ id.

const tasks = [
  { id: 1, label: "Faire les courses" },
  { id: 2, label: "Arroser les plantes" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle méthode de tableau utilise-t-on pour afficher une liste en React ?
   • push
   • map
   • forEach
2. À quoi sert la prop key ?
   • À trier automatiquement la liste par ordre alphabétique
   • À protéger la liste par un mot de passe
   • À permettre à React d'identifier chaque élément de la liste
3. Quelle est la meilleure valeur pour une key ?
   • Un identifiant unique et stable issu des données
   • L'index de l'élément dans le tableau, dans tous les cas
   • Un nombre aléatoire généré à chaque rendu