All right.
Let's get started with how we can handle forms in React.
So inside my form folder that you created.
All right, so let me put it inside my component like that.
So my form is inside my component.
It's an empty folder.
So let's create the component.
Then we can get started with the steps.
So the component, I would name it as register component or register dot just and let me use the AFC
discover for the component.
So inside that let's have H two and then I would name it as register.
From.
So let's go ahead and mount this component.
So let's go to app and then let's require the component, which is the register component.
The auto import is working for me perfectly, so let me mount or render this component.
So let me move this one and now let me call my component.
I'll start and now I have my register form.
So let's have a look at how we are going to start to handle forms in React.
We have couple of steps.
So step number one is what give initial.
E ne share.
Values for each form input.
Okay.
And next is we are going to create a function called on change function.
So any time we type anything into the input field, this unchanged function is going to be triggered
so they can update this date.
And then lastly, we go ahead and then submit.
So the first step is you need to know.
Sorry, it's supposed to be inside my register component.
Here.
Right there, inside the register.
Sorry, guys.
So one is you need to ask yourself what kind of data that you want to receive from your users.
If registration, you may need the person's email address, full name lists or whatever, depending
how you want it.
So for simplicity's sake, let's make really simple by taking the person email address.
Let's say the password and let's say the first name is good for us, right?
So you bring in the form the same way we do it in a normal ATM in JavaScript.
So inside here you bring our input, our input field like that, let's give it a placeholder of say
full name.
All right.
And next is let's copy this one and then paste it here and then input here is going to be email.
And then the type here, the type of this is going to be as e mail.
And then for the input here, the type is equal to text.
And lastly, we can copy this one and then paste it here.
It's going to be the person's password.
So here is going to be us password.
So if I save it now, I have my input field that I want them to be on the same line.
So let me put everything inside a div.
I want to be on top of it.
Sorry.
Not on the same line.
So our card is one and put it inside, Dave.
So like that.
So let's see the effect now.
Okay.
It is good.
So now the last thing is about a button.
So here a button to submit.
And then, let's say register and then let's give it a type.
Oh.
Submit.
All right, so now we have our form.
So how can we keep track of the states?
That's how you called us.
What control form?
Because you want react to keep track of any change we make inside our component.
So because of that, we need to provide initial state for each of these input field.
So the first one that I'm going to provide is let's keep track of the state.
So we need what is called the use state.
How is that?
So let's remove the comment here and now.
The first one is my you state is going to be the first one I want to keep track is I want to keep track
of the first name, the full name, right.
So here I'll provide initial state of it as an empty.
So let's give, let's return the full name.
And then the set full a function to update the foo name.
Not the first one.
So we need to provide.
Keep track of all this.
We have the full name, email and password so we can copy this one and then paste it and then paste
it.
The next here is going to be the email and then set email and the lastly is going to be password and
then set.
Password like that.
So now we have our initial state, so how can we bind the initial state to this input?
So we need to provide a value to each of this input field.
So here let's provide a value.
The initial value here is from our state, which is the full name.
So you provide full name here.
And the same thing applies to an email.
The initial value here is the state we have, so we provide a value in core email.
And next lastly is going to be the password.
So provide a value equal to password.
So it means that we are binding the input values here to our component.
So in time we call this function and then update our state will be updated automatically.
So we have one way binding.
So now we have the initial state for our form.
How can we type in?
I cannot even type in anything here into the field.
Whatever I do, it doesn't.
So the reason why I couldn't type anything here is that we want to keep track of whatever we type in
here because we provided a value for the for the input field.
It means that if you type anything, we react, want to take what you are typing to update our state,
but we are not calling the on change.
So the on change handler is going to help us to do that.
So in the next video, let's see how we can bind the value we are typing here to our state in the next
video.