Not bad, not bad.
We have our basic setup in place.
We have our first input.
We have the button that submits the form.
So now we just need to add a few more inputs, correct one for password and then one for email.
But if we take a look at our application, you can see that there's going to be a bunch of components
that we will set up.
We have those inputs.
So in order for the profile, we use, the inputs for the jobs or use that and kind of what makes sense
if we would set this one up as a separate component because that way?
We won't have to copy and paste, so we can set this up as a component and then pretty much anywhere
where we want to render that.
We're just pass in the props.
So here's what I want you to do.
Go to a components folder and then create a formal dress and set up all the imports and exports.
And what I mean by that is important in the next year export exported from the object and then imported
in register.
So those three steps and once you do that, go to a form formal and pretty much take whatever we have
right now for input and just set it up using props.
We're on notice the former owner component will be a type named value handled change and label text.
And that's when I'll talk about once I set it up in a second and in here you basically want to take
there the label, the input and just assign them to the props.
And once you do that, then in the register, you can add two more.
One for email and password.
Just keep in mind that for email and password types are different, names will be different.
And also the value in initial state will be different.
The handle change will be exactly the same, but not the first three.
And once you're ready to go, resume the video and watch how I do it.
So first, we need to navigate over to the components, correct?
So let's get ourselves there, and then let's just say form row, yes.
And then I simply want to take what I have in the register.
So I'm going to set it up right away and then I'll deal with imports and exports.
That's really up to you all.
You want to do it.
So I'm just going to take a risk.
So cut it out here.
And in fact, in a form row.
Well, first, I want to create the component correct.
So I just go with our snippet.
And then as far as their turn.
Well, let's copy and paste.
Like I said, this component will be looking for the props because every time I want an input, well,
I'll just pass it.
And what kind of input and what are the things that we're looking for?
Well, we want to get the type, we want to get the name, we want to get the value, we want to get
the handle change.
And we also want to get a label text.
Now why we're getting a label text?
Well, because there's going to be some instances where the variable in the state will have a common
case name.
But then as far as the label, I want to showcase a proper name and the way we'll set it up.
I'll say if the label text prop is passed and then use that water, if not, then just use a regular
name.
So what you need to understand is that there's going to be some instances where state value is not going
to match exactly like we have right now where we have a name.
Imagine if you were to have their first name, but I still want to showcase the name and that's where
the label comes into play.
And this will probably make sense way more.
The first time we'll have to use it.
So for now, just focus on these ones.
And then again, this one will be only used if it's actually passed.
And if not, we'll still use the name.
And now let's assign these values to our props.
So instead of hard coding the name, I'll say whatever is the name prop now, class stays the same.
And here next.
Yep, this is what I'll call the label text.
If it's passed, then if not, then we'll just go with name.
Then as far as the type.
Well, the moment we have already a problem.
Right?
So let's set up here a type.
And as far as the value, well, we'll pass it in.
So we simply want to switch this around where we're not looking for the values anymore.
We're looking for a value prop and name.
Well, that will be equal to your name.
And then how do you change stays exactly the same because now it's going to be a prop and then we're
just passing it from the parent container.
So I set this on up.
I have the default export, so now I simply want to go to my index and this is the case where we can
use the nice on our import.
And basically, my preference is something like this where I go with form and row.
I imported here and now I just want to place it in this object.
So I moved down when I need to add a comma just to have a proper syntax.
Now might bring back some things here and we also need to save the register and then.
Once I'm back in the register, not only I want to get local, but I'm also looking for that family.
So let's say here, form row and once we import.
Now I can scroll down.
And now, what do we want to do?
We want to pass in those props.
Correct.
And not only we want to pass in the props for the moment, but we also want to do the same thing for
email and password.
So let's go here with form row.
And as far as the name, it's going to be like this.
We're going to go with pipe and pipe will be taxed.
That name will be equal to name.
And then also the value will be equal to values and name.
And then lastly, I know change will be equal to a channel change.
So essentially now we just set up everything in the component instead of hard coding.
So this value will still be the same.
And also, once we click on it, we'll still trigger D.A. change.
But now I can reuse it all throughout my project.
So now let's take this, including the comment.
I think it's going to be easier that way.
Let's copy and paste and just be careful when you're setting up these rallies because it's very easy
to make some kind of mistake.
So first of all, this is not going to be an event, but we're going to go with email one.
As far as the type, well, it's not a text anymore.
It's going to be an email that when it comes to a name of the input that's going to be emailed as well.
And as far as the value, well, now we're looking in the state and we go with the email and that's
the cool thing.
If you set it up here as an object, I can basically use the same function.
So the handle change will access both the name of the input as well as the value.
And then I'll just access the proper thing here in my initial state.
So that's why I don't have to change anything about this function.
It's assigned to a prop and then it's triggered in the form room and the same goes for password.
So I'm going to go here with password.
And then as far as the type, yep, it's going to be a password type.
So it's set up your password.
My name?
Yep.
Same password and mine value are looking in the values and we're looking for password.
And like I just mentioned, I'm going to change stays exactly the same.
So once I have all of them in place again, let's navigate to the big screen and let's just quickly
click on one of them just so we can see.
Notice now I'm getting the name, email and the value that actually matches my email in the state and
the same place.
Now I can do the same thing with alert.