4.6 travailler avec plusieurs états

Très bien ce que nous allons faire c'est qu'on va de nouveau utiliser state parce qu'on peut utiliser on va définir l'état de cette entrée ici au départ c'est une chaîne vide c'est tout à fait normal parce que lorsque ce composant est rendu pour la première fois et rien n'a été déterminée mais lorsque nous pouvons nous vous utilisez cette structuration pour obtenir nos deux éléments qui sont actuellement entered ce qui veut dire entrée title du coup entre le titre comme ceci ensuite on va laisser tout seul on va appeler le set alors pareil entered title

en fait la commande set permet de lister des variables d'environnement du coup c'est ce qui va nous aider avec le formulaire ensuite ce que vous allez faire vous allez juste copier le set ici en fait pour l'appeler on va le rajouter ici à la place de console log ça vous voyez il n'y a plus d'erreur et en plus c'est t'appeler ensuite au-dessus de return on va rajouter un constAmount ça c'est pour le montant changeHandler c'est pour le gestionnaire de montant et la logique que fondamentalement la même qu'avant on va mettre = event fonction fléchés et si vous avez écrit comme moi

normalement ça devrait être bon comme vous pouvez le voir on a encore une petite erreur Ici et ici mais c'est normal on va les appeler vous inquiétez pas après ils vont totalement disparaître alors ce qu'on va changer dans le tableau ici c'est que dans montant on va rajouter un onchange en fait pour expliquer c'est quoi onchange il définit le déclenchement d'un script lorsque des données ont été modifiées par ... l'utilisateur dans un formulaire par exemple le gestionnaire est attachée au formulaire plus précisément aux éléments input Select et textarea c'est sur un changement d'état de des données ensuite vous mettez égale devant dans les brackets ce qu'on va mettre vous prenez ce que vous avez ajouté le AmountchangeHandler et vouloir ajouter ici alors n'oublie pas de mettre Ceci sinon ça ne va pas vous le compté voilà comme ceci et comme vous pouver le voir on a plus d'erreur sur celui-là parce qu'on l'a appelé ici.

Tout Simplement ensuite en dessous du const qu'on a fait tout à l'heure on va rajouter un autre const et on va ajouter le Datechangehandler c'est la troisième fonction pour mon gestionnaire de changement de date et on reprend juste ça et comme tout à l'heure ce qu'on va faire dans le date on va prendre ici le One change bracket dedans on va mettre Datechangehandler comme ceci et ici on va en haut vous pouvez voir il n'y a plus de fautes il a été appeler

Ensuite ici pour rajouter un autre UseState on peut appeler l'état plusieurs fois et à l'intérieur on va rappeler l'État et extraire mon montant on va mettre enteredAmount ensuite on va mettre set entered et là on va rajouter devant Amount UseState petite erreur de ma part on ne va pas les mettre à l'intérieur des parenthèses mais à l'intérieur des crochets et ici on va pour mettre les parenthèses et ici on mais pas useState excuser moi on met const comme ceci voilà ce qu'on va faire c'est qu'on va ici mettre un crocher = UseState. et normalement ça sera bon du coup on à enteredAmount et set EnteredAmount maintenant nous avons ces deux éléments ensuite dans le const amountchangeHandler on va mettre le set enteredAmount title

on va pouvoir appeler notre montant par set et transmettre également une valeur cible est dedans on va rajouter event.target point value et sans surprise nous pouvons faire également la même chose pour l'État d'utilisation de l'appel de date et stocké une chaîne du coup on retourne ici on met UseState. Et vu que là on va s'occuper des dates. on va pouvoir marquer const et a l'interieur des crochet Décrocher on va pour mettre entered et ici on va changer par date.

Virgule set entered pas Amount du coup mais date. Du coup on va pouvoir appeler set enteredDate dans le dernier const changeHandler on va pouvoir appeler ça dans le const date maintenant je pense qu'on connait tous la chanson vous mettez entre parenthèses event. Point target.value maintenant nous avons aussi licence libre et vous verrez que beaucoup que vous avez plus d'un états part composant vous pouvez avoir ses états séparés et les mettre à jour mais au moins est-ce que plusieurs états est un concept que je veux examiner de plus près on verra ça dans le prochain cours.