Tutoriel React — Chapitre 8

Plan du chapitre

• 1) Pourquoi les listes sont partout
• 2) Utiliser map() pour afficher une liste
• 3) JSX + map : la syntaxe typique
• 4) La prop key : à quoi ça sert ?
• 5) Choisir une bonne key (bonnes pratiques)
• 6) Pourquoi éviter l’index comme key
• 7) Filtrer puis afficher : filter() + map()
• 8) Résumé (à retenir)
• 9) Exercice pratique

1) Pourquoi les listes sont partout

La majorité des applications web affichent des données : ces données viennent d’un tableau (ou d’une API qui renvoie un tableau). Exemple : un site e-commerce affiche une liste de produits.

2) Utiliser map() pour afficher une liste

Rappel : map() parcourt un tableau et crée un nouveau tableau. En React, ce “nouveau tableau” sera souvent un tableau d’éléments JSX.

Exemple simple (liste de prénoms)

export default function App() {
  const names = ["Alice", "Bob", "Chloé"];

  return (
    <ul>
      {names.map((name) => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

Ici : names.map(...) retourne plusieurs <li>, et React les affiche dans le <ul>.

3) JSX + map : la syntaxe typique

La syntaxe la plus fréquente ressemble à ceci :

{tableau.map((element) => (
  <Composant />
))}

Pourquoi ces parenthèses ? Parce que c’est plus lisible quand on retourne un bloc JSX sur plusieurs lignes.

Avec un tableau d’objets (cas réel)

export default function App() {
  const products = [
    { id: 1, title: "Clavier", price: 49 },
    { id: 2, title: "Souris", price: 25 },
    { id: 3, title: "Écran", price: 199 }
  ];

  return (
    <div>
      {products.map((p) => (
        <p>{p.title} — {p.price}€</p>
      ))}
    </div>
  );
}

4) La prop key : à quoi ça sert ?

Si vous essayez l’exemple “produits”, React affichera peut-être un avertissement : “Each child in a list should have a unique key prop”.

La key est une information qui aide React à identifier chaque élément de la liste. Cela devient crucial quand une liste change : ajout, suppression, tri, filtrage…

Exemple corrigé (avec key)

{products.map((p) => (
  <p key={p.id}>{p.title} — {p.price}€</p>
))}

5) Choisir une bonne key (bonnes pratiques)

La meilleure key est généralement un identifiant unique venant des données : id en base de données, UUID, etc.

Bon exemple

<li key={user.id}>{user.name}</li>

Moins bon (mais parfois acceptable)

<li key={user.email}>{user.name}</li>

Un email est souvent unique, mais peut changer. Un id est plus stable.

6) Pourquoi éviter l’index comme key

Beaucoup de débutants font ceci :

{products.map((p, index) => (
  <p key={index}>{p.title}</p>
))}

Le problème : si la liste change d’ordre (tri) ou qu’on insère un élément au début, les index changent. React peut alors “confondre” les éléments et réutiliser le mauvais DOM. Résultat possible : affichage incohérent, états internes mélangés, bugs difficiles à comprendre.

Quand l’index peut être toléré ?

• Liste totalement statique (jamais modifiée)
• Ordre fixe, pas d’ajout/suppression

7) Filtrer puis afficher : filter() + map()

Très fréquent : afficher seulement une partie des données (ex : produits en stock). On filtre d’abord, puis on map.

export default function App() {
  const products = [
    { id: 1, title: "Clavier", inStock: true },
    { id: 2, title: "Souris", inStock: false },
    { id: 3, title: "Écran", inStock: true }
  ];

  const inStockProducts = products.filter((p) => p.inStock);

  return (
    <ul>
      {inStockProducts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

On peut aussi chaîner : products.filter(...).map(...). On le verra plus tard, mais déjà, l’idée est claire.

8) Résumé (à retenir)

• map() permet de transformer un tableau en éléments JSX affichables.
• Quand vous affichez une liste, React demande une key unique.
• La key doit être unique et stable (ex : id).
• Évitez l’index comme key si la liste peut changer.
• Cas réel : filter() puis map() pour afficher une liste filtrée.

9) Exercice pratique

Réalisez cet exercice dans votre projet React (celui créé au chapitre 6). L’objectif est de pratiquer map, filter et key.

Étape 1 — Données

Dans App.jsx, créez ce tableau :

const users = [
  { id: 1, name: "Alice", active: true },
  { id: 2, name: "Bob", active: false },
  { id: 3, name: "Chloé", active: true },
  { id: 4, name: "David", active: false }
];

Étape 2 — Afficher tous les utilisateurs

• Affichez une liste <ul>
• Utilisez users.map(...)
• Utilisez key={user.id}

Étape 3 — Afficher seulement les actifs

• Créez const activeUsers = users.filter(...)
• Affichez activeUsers avec map

Bonus

Ajoutez un petit texte “(actif)” à côté du nom si l’utilisateur est actif, en utilisant une condition avec &&.