We come back this way.
We left by having initial state for our form.
Let's try to do what is called binding.
Meaning whatever I type in here into my form, I want react to update it for me automatically.
So you're going to create a function to do that?
I mean, call that function as an on change.
So you're going to create a function for each of these input fields.
So the first one is on the on change food name.
So the function goes like this.
So const.
On change.
Full name, meaning the full name import field.
Going to be my arrow function.
And now for each of this one, we have access to the event.
On the input field.
So if you try to console that, log the event.
So the next step is we need to bind this on change function here to the input.
So now let's provide the event here called on change and now we pass in our handler the function that
is unchanged.
Funny.
So with this one, let's go ahead and try if we can type in anything here.
And I believe we cannot do it.
So let's see if I type in anything here.
You see that?
I don't see the effect.
I cannot type anything.
Why?
Because react one to call the set full name value to update the input field.
So inside our own change handler here, we can now call set full name so we can set full name to whatever.
Let's say I'm here now we have the input of full name, value of full name inside that.
So let's try if I type anything here now I get ima whatever I type in here I get ima simply because
when I type in anything into this input field, it's looking at a function to update this particular
input and which is set full name and what are the set filename name is doing is just replacing the initial
value of my full name from empty string to IMA.
So on change means whatever I type in here I still have ima.
So to make it more dynamic right, we need to get whatever is typing here.
So how can we get that?
That is why we have this event method here, prop object here.
So let's check our console as soon as I do that.
Let's see, let's refresh it.
And now we have this error.
Don't worry, you will face very soon.
So if I type anything here we see that I get the event being triggered, which is this.
And what I want is my target value to give me the actual value.
So now instead of this ima okay let's try it here.
Event dot target.
Dot value.
Check it out.
So now let me refresh it.
And now let me tap anything here.
You see that?
I get cue for the first one and then the preceding ones.
I get that.
Okay, so now I'm going to replace this static test.
We provide for email with what you are getting inside.
So now let's have a look.
If I save it now, let's have a look.
If I type in anything here now, I can type in anything inside.
So let's do the same thing for the the email and then the password so we can copy this one.
And then let's comment here and call it as on change.
On.
Change few name.
And next week I'm going to be the UN change.
Emile.
So let's do it.
So.
Cast on change.
Emile.
Is equal to.
I have access to my events and now I'll call my function set email.
Then I'll pass in event your target dot value as we did before.
So let's do the same thing for the password.
So let's copy this one.
And then on change password like that.
Change the name here to on change password.
And next year that is it.
So let's bind to the individual ones.
So for the first one for the IMO is unchanged.
Of.
On change and now pass in the on change email.
Next one is on change.
Going to be on change password.
Now everything.
There'll be no error.
Okay, so let's save it.
And now there is no error because we are binding our input to our state.
So let's say this is going to be Ben and then email as Ben adds.
Then at at gmail.com and then one, two, three, four, five or the parser are working.
Uh uh.
Maybe I'm passing the same value to you have the.
Oh, sorry.
I need to change this one to set password.
Set password and then set email.
Yeah.
So let's try again.
And now let's say this ban and then then at gmail.com and then password.
One, two, three, four, five.
Next is when I click on this one, you see that I get this refresh and react.
Want to have a control over the data that you are typing to avoid refreshing.
So let's avoid this.
How to prevent refresh upon form submit.
All right, great.