4.9 ajout d'entrées de formulaire

Maintenant que nous savons quel est l'état et que nous comprenons également comment nous pouvons écouter les événements nous pouvons continuer à travailler sur cette application et devenir de plus en plus un outil de suivi des dépenses ce qu'on va faire c'est dans component on va créer un nouveau dossier qu'on va appeler new dépenses et dans ce dossier on va mettre un fichier qui va être new Depense.JS

et dedans comme d'habitude on va ajouter import react en dessous on va rajouter un const newDepense = parenthèses fonction fléchés comme ceci et bien sûr n'oublie pas de mettre le exporte defaults new dépense ensuite dans le const new dépenses on va rajouter un return div et dans la DIV vous mettez form maintenant on va pouvoir ajouter de nouvelles dépenses ça va être le fichier new dépense point CSS comme ça au moins on a le style très bien voilà j'ai noté. Tout le code CSS je vous laisse recopier comme vous pouvez le voir il y a le new dépenses bouton et comme ça grâce à ça. On va pouvoir aller un peu plus loin on va retourner dans le New dépense et on va ajouter.

On va pouvoir aller un peu plus loin on va retourner dans le New dépense et on va ajouter. Ici import new dépenses. Point css. parfait Maintenant on va aller dans le const new dépenses ce qu'on va faire on va enlever le forme et on va ajouter classname new-dépense comme ceux-ci maintenant dans le niveau dépense ce qu'on va faire on va ajouter dépenses form voilà pourquoi je l'ai enlevé dedans on va mettre un const ce tu dépenses form fonction fléché comme ceci voilà parfait maintenant c'est qu'on va faire on va faire export default dépenses form.

vous voyez ça se répete et comme d'habitude ici on fait import react. et en dessous import React on va ajouter import dépense form.css comme ceci est maintenant on va ajouter dans le dossier news dépenses comme toujours un nouveau fichier cette fois on va appeler dépense form.css va retourner dans le dépense form et dans const dépense forme on va rajouter un return form. on va mettre une div class name new dépense contrôls c'est en fait ils disent qui contiendra toutes les entrées ensuite on va rajouter vous pouvez copier la même chose sauf que là il n'y aura pas de S et en dessous on va rajouter un label titre. input type Texte comme ceci très bien voici ce que je vous devais marquer pour le titre le montant est la date on va rajouter juste ici un max on va dire 2022 05 25 ensuite en dessous des div on va rajouter un div class name on va marqué new dépenses action ensuite dans la DIV vous mettez un bouton est dans le bouton vous mettez un Add depense dans le bouton on va rajouter un type submit et normalement ça sera bon ensuite on va retourner dans le new depense.js ensuite on va retourner dans le new depense.js et au dessus import on va mettre ensuite ce qu'on va faire c'est dans la div on va marquer un un depense form comme ceci ensuite ce qu'on va faire c'est qu'on va aller dans le App.js et ici ce qu'on va faire import new dépense component slash new dépense slash new dépense celui-ci ensuite on va ici dans le return en bas on enlever le H2 et on va mettre un new dépenses. comme ceci Ensuite on va retourner dans le new dépense.JS et là et ensuite si on va sur notre page. web on peut voir que tout a été ajouté ce n'est pas encore super beau mais on va arranger ça.