4.12 composante de communication enfant-parent (ascendante)

Ce qu'on va faire on va ajouter un nouvel accessoire au formulaire de dépenses juste ici ce son nos composant nous pouvons les nommer comme nous voulons mais je le nommerer lors de l'enregistrement on va marquer ici onSaveDepense dépense data je le nomme simplement sur quelque chose parce que je veux préciser que la valeur de cet accessoire doit être une fonction de fonction qui sera éventuellement déclencher lorsque quelque chose se passe à l'intérieur de ce composant maintenant juste en dessous de const NewDepenses on va rajouter de l'espace pour marquer const save dépense data et on varajouter Handler

En fait je vais ajouter un gestionnaire de données de dépenses const save et il est important en tant que paramètres ici rajouter une fonction fléchés et à l'interieure ici on va rajouter entered dépenses data le nom du paramètre dépend de vous c'est votre fonction mais maintenant je précise que cette fonction s'attend à obtenir ce paramètres et puis si nous allons ajouter dépenses const dépenses data on rajoute ceci point virgule et puis dans le crochet on va rajouter trois petits points entered depense juste pour expliquer à quoi servent les trois petits points les trois petits points en javascript son les spread rest operator les spread operator permettent d'étendre une expression dans les endroits où de multiples arguments qui sont attendu je retire tout les pairs clés valeurs et les ajoute a son nouvel objet puis ajoute une nouvelle clé à la clé ID

du coup on va rajouter ID (ID) ça veut dire identifiant math.random Mettez des parenthèses alors c'est quoi math, math signifie mathématiques aléatoire aléatoire en chaîne pour la convertir en chaîne si vous voulez point tostring et des parenthèses ce n'est pas une parfaite et unique théoriquement nous pourrions générer la même valeur deux fois mais c'est assez bon et puis nous pouvons voir ce que nous en faisons par la suite et pour le moment je vais juste verrouiller c'est donner de dépenses enrichies du coup ses data et on va rajouter juste en bas. Une petite chose c'est dans le dépense forme juste ici on a rajouté notre onSaveDepenseData on va mettre un petit égale entre crochet et a l'interieure de c'est crochet vous mettez le save seulement vous enlever le on de save Data.

Handler là par contre vous enlever le on comme ceci et vous mettez un petit S minuscule et vous mettez un S minuscule donc cette décision de save dépense et resté un accessoire dans mon composant personnaliser et reçois cette fonctions en tant que valeur maintenant nous allons aller dans dépenses form on va aller sur console dépenses data et ce qu'on va faire on va le supprimer vous allez voir pourquoi parce qu'à la place des accessoires au lieu de soumettre Handler et au lieu de consigné mes données de dépenses je vais acceder aux accessoires pour enregistrer les données de dépenses et les exécuter ici du coup ici voir ajouter props point vous rajoutez onSaveDepenseData et bien sûr vous mettez entre parenthèses Point Virgule ensuite vous rajoutez dépenses data dans les parenthèses par conséquent dans App.js nous pouvons ajouter une fonction on va écrire const juste ici on va mettre add dépenses Handler nous prévoyons d'obtenir nos dépense ici en tant que Paramètres puis nous en ferons quelque chose pour le moment vous rajoutez égal dépenses fonction fléchée Et vous mettez les crochets avec un point virgule comme ceci je vais simplement annuler le journal dans l'application JS et les dépenses de la console à l'intérieur on va marqué console.log entre parenthèses In App.js nous n'avons pas encore tout à fait appris comment nous pouvons rendre les liste de données de manière dynamique on va rajouter encore console.log entre parenthèses dépenses point virgule nous pourrions donc nommé cette accessoires

ici sur les dépenses publicitaires encore une fois le nom dépend de vous c'est votre composant mais encore une fois je suivrai cette convention en commençant par on pour préciser que c'est un pointeur de fonction du coup ici vous mettez on comme tout a l'heure Add dépenses entre crochet Add dépenses Handler comme ceci. On va rajouter ça et ça pour pas qu'il y est de faute on va retourner dans New dépenses et ici on va rajouter props comme ça au lieu de nouvelles dépenses nous pouvons maintenant les appeler

nous pouvons accepter les arguments ici maintenant ici ce qu'on avait tout à l'heure console dépense Data on va l'enlever et on va rajouter props.onAddDepense en faite c'est ce qu'on a mis dans le App.Js on va l'appeler juste ici et bien sûr ici nous voulons utiliser le nom que nous avons choisi ici dans les composants de l'application nous appelons la fonction passer comme valeur pour cela sur la depense props ensuite juste ici

à l'intérieur des parenthèses on va mettre dépense data j'appelle cela ici et il transmettra en fait ici mes donner de dépenses et si vous allez sur votre site web et que vous essayez de rajouter un produit verrez que dans votre console la nouvelle dépense s'enregistrera mais pour le moment je voulais me concentrer sur ce problème de gestion des États et des événements et pouvoir transmettre des données en un élément crucial voici Comment cela fonctionne on se retrouve pour le prochain cours.