4.6 working with several states

All right what we’re gonna do is that we’re going to use state again because we can use we will define the status of this entry here initially it’s an empty chain it’s quite normal because when this component is rendered for the first time and nothing has been determined but when we can we use you this structuring to get our two elements which are currently entered which means input title from the shot between the title like this then we’ll leave all alone we’ll call the set then same entered title

in fact the set command allows to list variables environmental so this is what will help us with the form then what you’re gonna do you’re just gonna copy the set here in fact to call it we will add it here instead of console log that you see there is no more error and besides it is calling you then above return we’ll add a constAmount this is for the changeHandler amount this is for the amount manager and the logic that basically the same as before we will put = event function arrow and if you wrote like me

normally this should be good as you can see we still have a small mistake Here and here but it’s normal to call them don’t worry after they go totally disappear So what we’re gonna change in the picture here is that in the amount we will add an onchange in fact to explain what onchange it defines triggering a script when data has have been modified by ... the user in a form such as the manager is attached to the form more precisely the input Select and textarea elements it’s about a change of state of data then you put equal before in brackets what we’re going to put you take what you have added the AmountchangeHandler and want to add here so don’t forget to put This or it’s not going to count you This is it and as you can see we have more error on this one because we called him here.

Simply then below the const that we did earlier we’re going to add another const and we’ll add the Datechangehandler this is the third position for my manager change of date and just take it back and as before what we will do in the date we’ll take here the One change bracket inside we’ll put Datechangehandler like this and here we go up you can see it there are no more mistakes he was called

Then here to add another UseState we can call the status several times and inside we’ll recall the state and extract my going up we’ll put enteredAmount then we’ll put set entered and here we will add in front of Amount UseState small mistake on my part we’re not going to put them in brackets but inside the hooks and here we’re going to put parentheses and here we but not useState excuse me we put const like this here What we’re gonna do is we’re gonna put a crocher in here = UseState. and normally it will be good so we enteredAmount and set EnteredAmount now we have these two elements then in the const amountchangeHandler we’ll put the set enteredAmount title

we will be able to call our amount per set and also transmit a target value is in we will add event.target point value and unsurprisingly we can also do the same for the Use State of the date and stored a string so we go back here we put UseState. And now we’re gonna take care of the dates. we will be able to mark const and inside hook Pick up we go to put entered and here we will change by date.

Comma set entered not Amount of the shot but date. So we can call set enteredDate in the last const changeHandler we can call it in const date now I think we all know the song you put between event parentheses. Point target.value now we also have license free and you will see that many that you have more than one component share state you can have his separate states and put them to but at least several states is a concept that I want to examine more closely on will see that in the next class.