5 1 React Rendering data lists

Pour afficher dynamiquement une liste de dépenses, on doit pouvoir générer du JSX à partir d'un tableau de données. La technique consiste à utiliser des accolades dans le JSX pour exécuter du code JavaScript dynamique, puis à appliquer la méthode map() du tableau pour transformer chaque élément en composant.

La méthode map() pour générer du JSX

On place les accolades juste au-dessus du premier <ExpenseItem />, et à l'intérieur on appelle props.items.map(...). map() est une méthode native des tableaux en JavaScript qui crée un nouveau tableau en appliquant une fonction sur chaque élément. Si vous voulez en savoir plus, cherchez « JS Array map » sur internet. 

{props.items.map((expense) => (
  <ExpenseItem
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
  />
))}

Entre les parenthèses du map, on déclare une fonction fléchée qui reçoit chaque expense en paramètre. Sur le côté droit de la flèche, on retourne directement l'élément JSX <ExpenseItem />. Si vous utilisez la syntaxe avec parenthèses (au lieu d'accolades + return), le JSX est retourné implicitement.

Pour chaque dépense du tableau, on transmet les props : title={expense.title} pour extraire le titre, puis on fait la même chose pour amount et date. Une fois le code mis en forme et propre, on obtient l'affichage de toutes les dépenses du tableau, dans l'ordre. Chaque élément du tableau est mappé vers un composant ExpenseItem indépendant. C'est exactement la façon dont React affiche des listes dynamiques.

En résumé

Cette leçon enseigne comment rendre dynamiquement une liste de données en React en utilisant la méthode `map()` du JavaScript. Vous apprendrez à itérer sur un tableau (array) d'éléments et à transformer chaque élément en composant JSX. L'exemple pratique montre comment afficher une liste de dépenses en passant les propriétés (titre, montant, date) à chaque composant enfant via les props.

Points clés

  • Utiliser les accolades {} dans le JSX pour exécuter du code dynamique et y insérer des expressions JavaScript
  • La méthode map() est une approche standard pour transformer chaque élément d'un tableau en un composant React
  • Passer les données de chaque élément au composant enfant via les props (expense.title, expense.amount, expense.date)
  • Les arrow functions simplifient la syntaxe lors du mapping : expense => &lt;ExpenseItem ... /&gt;
  • Cette technique permet de rendre efficacement des listes d'éléments sans code répétitif

Questions fréquentes

Pourquoi utiliser la méthode map() plutôt qu'une boucle for classique en React ?

La méthode map() retourne un nouveau tableau et intègre naturellement la syntaxe JSX. Elle est plus concise et fonctionnelle que les boucles for traditionnelles, ce qui correspond mieux au paradigme de React basé sur la composition de composants.

Comment accéder aux propriétés de chaque élément lors du mapping ?

Lors du mapping, chaque élément est passé en paramètre à la fonction de flèche (ex. `expense`). Vous accédez alors à ses propriétés via la notation pointée : `expense.title`, `expense.amount`, `expense.date`.

Comment transmettre les données à chaque composant enfant ?

Les données sont transmises en tant que props au composant enfant (ExpenseItem). À chaque itération, vous passez les propriétés de l'élément courant : `title={expense.title}`, `amount={expense.amount}`, `date={expense.date}`.