React 5 2 Utilisation de listes avec tat

Maintenant que nous savons afficher une liste de dépenses, comment faire pour qu'elle se mette à jour quand l'utilisateur ajoute une nouvelle entrée via le formulaire ? La réponse est dans App.js : c'est là que nous devons gérer le tableau des dépenses, puisque c'est le composant qui le détient.

Ajouter une dépense au tableau d'état

On importe useState de React, puis on déclare un état pour le tableau des dépenses, initialisé avec les dépenses factices :

const [expenses, setExpenses] = useState(DUMMY_EXPENSES);

const addExpenseHandler = (expense) => {
  setExpenses((prevExpenses) => {
    return [expense, ...prevExpenses];
  });
};

Dans addExpenseHandler, on reçoit la nouvelle dépense en paramètre. Pour l'ajouter au tableau, on passe à setExpenses une fonction qui reçoit l'état précédent (prevExpenses). À l'intérieur, on retourne un nouveau tableau qui place expense en premier, suivi du spread de l'ancien tableau (...prevExpenses). Cette approche garantit que React utilise toujours le dernier instantané d'état, même si plusieurs ajouts s'enchaînent rapidement.

Pourquoi la forme fonction plutôt que [expense, ...expenses] directement ? Parce que dès qu'une mise à jour dépend de l'état précédent (ce qui est le cas ici : on ajoute aux dépenses existantes), il faut utiliser cette syntaxe pour éviter les bugs de timing. Chaque nouvelle dépense s'ajoute désormais au début de la liste, et l'interface se met à jour automatiquement.

C'est exactement ainsi qu'on rend des listes dynamiques avec état dans React. Dans le prochain cours, nous allons résoudre l'avertissement key que React affiche dans la console quand on génère des listes.