In this video.
Let's work on the registration.
So first of all, we need to handle the form data.
Well, you can give yourself a challenge by trying how you can handle the forms, and after that, you
can go ahead and create an action for registration.
All right.
So let's see how I'm going to do this one.
Perfect.
So the way we did for the log in, we are going to do the same thing.
So let's locate the register component and forms and register and here we go.
So we are not going to use different on change handlers, but instead we are going to use one group
method go on change for all the input field as we did for log in.
So here I need to keep track about the state, so I need to bring in the new state.
So for this one we have two properties that the foo name, the email and the password.
So here we go const and I'm going to assign the data to a variable called form data and then set for
data the way we did when we are logging in pass in object with this property is foo name by default
is empty and then the email of the user and email by default is also empty.
And then the password.
Well, you can use a third party package like for me to get this one done, but let's do it manually
by ourself.
So let me label here by saying form data and down here let's structure the form data.
It goes like this, this structure and comes from the form data here.
And I need the foo name, the email and then the password.
Great.
So next step is that let's create the own change handler.
So cost on change input is equal to I have access to the event and here we go.
So in here I would take the form data and then I'll pass in the initial state form data here.
Then this agreement is going to be the properties I'm going to use to update.
I'm going to use array with event or target.
So in case you are not familiar with what I'm doing, I advise you to watch a section for logging in
recorder part.
I took my time to explain this concept, so now the value is going to be as event or target dot value.
Now I'm done with it unchanged.
Then this one going to be the handle submit.
Great.
So I'm going to be cast on submit.
Handler.
And for this one too, I have access to the events and inside let's prevent a default.
I start and lastly, let's console.log the entire form data and let's see if everything will be all
right.
So next step is that because we are using this format, unless we use a name attribute on all the inputs.
So here we go on the email.
I want to provide the value for binding and going to be as email and then the change is equal to the
unchanged input and then the name attribute is going to be email.
So I can copy this one.
And now the rest of the input that is for the foo name.
Let's put it here and change this one to foo name and then the email to the foo name and for the own
change it remains the same.
Likewise the password.
Let's change this one to password and perfect.
So now make sure that you change the a link to button and not the h ref.
But instead can it be of type or submit.
Now we are done with the binding, so here we can provide a link.
If the person have an account, then click here to sign in.
So let's bring in the link component from React Prompt Adam and let's remove the A link and replaced
with the link tag here where I place it at one place it's supposed to be on this one.
The link here where I can remove this one because I have the register here already.
So here let's provide the two attribute and then first last log in.
Now, moment of truth.
Let's check it out.
When I click on this one, we can see that it took me to sign in and then sign up.
I need to provide a link for that.
So register.
Let's open the console and let's check it out.
As soon as I submit with any value here then provide with something like Gmail.
Otherwise I cannot submit.
And let's see.
Well, the full name too is email.
Then I think we made some mistake here.
The full name type is not email, but instead.
Can it be a text?
Yeah.
Perfect.
So let's send again.
I got a refresh.
Maybe I'm not binding the unsub me to the form.
Yeah.
So here, let's remove the action and going to be as one.
Submit it.
Going to be as on submit handler.
Let's see.
Let's clear the console.
And now let's enter some email and now full name and some password.
And let's see.
I can see that I go back the value.
So what about if a user tried to submit an empty field?
Let's try to prevent that.
We're using the elect.
So here let's check before submitting.
If there is no email or there is no password or there is no full name.
Then we can elect and say that please provide or details you provided or details.
Yeah.
So now let's see when I click on this one.
Now I got this one.
Okay.
But when I click okay, you can see that it's to call it so we can return from here as that return.
Perfect.
So now we are done with the form handling.
What has left is about creating the action to dispatch.
All right, let's get into that in this video.