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.