4.12 composante de communication enfant-parent (ascendante)

Dans ce cours, nous abordons la communication enfant vers parent (ascendante) entre composants React. L'idée : un composant enfant (le formulaire) doit pouvoir transmettre les données saisies à son composant parent. Pour cela, on passe une fonction en tant que prop depuis le parent vers l'enfant, et l'enfant l'appelle quand il a quelque chose à transmettre.

Passer une fonction via les props

Sur le composant <ExpenseForm /> dans NewExpense.js, on ajoute une prop onSaveExpenseData. Le nom est libre, mais le préfixe on signale que c'est un pointeur de fonction (convention React). Dans NewExpense, on définit un handler saveExpenseDataHandler qui reçoit en paramètre les données issues du formulaire :

const saveExpenseDataHandler = (enteredExpenseData) => {
  const expenseData = {
    ...enteredExpenseData,
    id: Math.random().toString()
  };
  props.onAddExpense(expenseData);
};

Le spread operator (les trois petits points ...) permet d'étendre une expression dans des endroits où plusieurs arguments sont attendus. Ici, il extrait toutes les paires clé-valeur de enteredExpenseData et les recopie dans un nouvel objet. On y ajoute ensuite une clé id générée par Math.random().toString(). Ce n'est pas un identifiant parfait — théoriquement deux appels pourraient produire la même valeur — mais c'est suffisant pour le projet.

Dans ExpenseForm, on supprime le console.log précédent et on appelle props.onSaveExpenseData(expenseData) à la fin de submitHandler. Puis dans App.js (le composant racine), on définit addExpenseHandler qui recevra les dépenses depuis NewExpense via une prop onAddExpense. On passe la fonction au composant : <NewExpense onAddExpense={addExpenseHandler} />.

Le résultat : quand l'utilisateur soumet le formulaire, les données remontent en cascade — du ExpenseForm vers NewExpense, puis vers App. Testez en console : chaque nouvelle dépense s'affiche. C'est l'élément crucial de la gestion d'état en React. On se retrouve dans le prochain cours.

En résumé

Cette leçon explique comment implémenter la communication ascendante (enfant vers parent) en React. Le parent crée un gestionnaire de données (handler) et le passe au composant enfant via une prop. L'enfant appelle cette fonction callback en passant les données de la nouvelle dépense, permettant au parent de mettre à jour son état. Le spread operator est utilisé pour enrichir les données reçues avec un identifiant unique.

Points clés

• Créer une fonction callback dans le parent pour gérer les données remontées par l'enfant
• Passer la fonction callback au composant enfant en tant que prop (convention : nommer avec le préfixe 'on')
• L'enfant appelle props.onSaveDépenses(data) pour transmettre les données vers le parent
• Utiliser le spread operator (...) pour enrichir et fusionner les données (exemple : ajouter un id généré)
• La fonction callback parent exécute console.log() ou met à jour l'état avec les données reçues

Questions fréquentes

Comment le composant enfant envoie-t-il des données au parent ?

L'enfant reçoit une fonction callback via une prop (ex: onSaveDépenses). Quand un événement se déclenche (ex: soumission du formulaire), l'enfant appelle cette fonction en passant les données en paramètre : props.onSaveDépenses(dépensesData).

À quoi sert le spread operator (...) dans ce contexte ?

Le spread operator (...) permet de déplier les propriétés d'un objet existant et d'ajouter de nouvelles propriétés. Exemple : {...dépensesData, id: Math.random().toString()} crée un nouvel objet avec toutes les propriétés originales plus un id unique.

Comment générer un identifiant unique pour chaque dépense ?

La leçon utilise Math.random().toString() pour générer un identifiant. Bien que théoriquement deux appels puissent générer la même valeur, cette approche est suffisamment fonctionnelle pour la démonstration.