All right.
And once we have the register page with one input, let's add the rest of the inputs.
But before we do that, let's take a look at our return.
Notice how we have the div, the label, the input, and if we'll add rest of the inputs for last name,
location, email and password.
Well.
Our return is going to be quite big and in my opinion, hard to navigate around and hard to manage.
So a better option if we know that we'll have a bunch of inputs, which we will, is to set up a component
where effectively we can group.
Everything.
What do we have inside of this div?
And essentially.
We can nicely just set up these values as props.
So if we want different type, then of course we'll pass in the type the ID and hopefully you see where
I'm going with this.
Again, this is the case where I know that I'll have a bunch of inputs, so I might as well create the
component.
And that way, if I ever need to change something about this particular structure, I can do it in one
place.
Because keep in mind, if I'll copy and paste this, let's say 15 times and then I'll say, You know
what, actually, I don't want to use required.
Well, I'll have to go to all of those instances and pretty much.
Remove this manually.
So in order to set it up, we want to go to components.
In my case, I'm going to call this a form a row.
JS.
Of course, in this case, and effectively I just want to grab that return.
So let me first navigate to a register.
Let me grab everything here in this form row.
Then in here, let's create the component.
Okay, good.
And then this is what we want to return.
And we just need to decide what kind of props we're going to pass.
So we have the label.
Label is going to have here the ID, Correct.
Now, what is this ID going to be equal to?
Well, whatever we have here as far as the name value, correct.
So first, let's just add the props we're going to pass.
So there's going to be a type prop effectively.
At the moment it's text, but of course it can be email, it can be password and all that.
We'll pass in the name.
We'll also pass in the label text, which is going to make sense once we get to the last name.
So for now, let's just not worry about it.
But once we get to the last name, we'll return to this topic and also we want to pass in the default
value.
So these are going to be our props now as far as our return.
So this one will be actually equal to whatever is the value.
Again, in this case, it's name equals to name.
So it looks a little bit funky, but.
Hopefully you see why we're doing that.
Then here, instead of the label, this is where I'm going to go with label, text or name.
Again, something which is going to make sense once we set up, for example, last name.
So if we provide some value for label text prop.
Yep, we'll use that.
If not, it's always going to be equal to name.
Then type is equal to whatever is going to be our prop.
Then id same deal equals to our name.
Prop name equals to of course our name prop.
Yep.
That stays the same.
And then when it comes to default value, well.
Either it's going to be equal to our prop or if it's not provided, well, then simply we'll go with
or and we'll say equals to an empty string.
So now let's navigate to index.js in the components.
That's what we're looking for.
Now.
I went to the pages we want to copy and paste.
We want to rename.
Form row.
Let's say that and then back in the register.
Effectively we want to add few more inputs.
So right after the register we're going to go with form row coming from the components.
And in this case we're going to go with type is equal to text and name is equal to name, correct.
Let's close it.
Let's save it.
And also, like I said, while we're setting up the register and login functionality, I also want to
use some default values.
So in this case, I'm going to go with John.
Let's save that.
Yep.
This is what we should see on the screen and now we just want to copy and paste and set up one for last
name, location, email and password.
So let me copy and paste.
I believe what one, two, three, four times.
So.
This should be the result.
And then the second one is going to be the last name.
And notice something interesting.
If I'm going to go here and if I'll type last name, which is going to be the name.
So this is what we're going to be sending.
The annoying part right now is that since we're using the name notice, the label text is Camelcase,
which is probably not the best look.
And therefore we have that label text prop where essentially we just set up a text for the label.
Again, this is what we're going to be sending to our server.
But as far as the label text, well I want to display something else and therefore I'm going to go with
last name, just like other ones.
Of course, it's totally optional.
You don't want to use it.
And in this case, I'm going to go with a Smith.
That's going to be my default value.
Let me refresh.
Yep.
Then the next one is the location one where we go with text.
So type stays the same.
And then the value here is going to be location.
Now, the default one, I don't know.
Type Earth, for example.
That's a good value.
Again, we can refresh.
And now we have this one.
Then we have one for type email.
And the name is going to be equal to an email.
Email default value will be.
John at.
Gmail.com.
And then the last one is going to be type password.
The name.
Is going to be equal to a password and then default value.
Let's just write secret.
One, two, three.
Let's save all of this.
Let's refresh.
And this is what we should see on the screen.
Again, we created a formal component where we are grabbing the props and.
As a result, our return is cleaner.
Basically, we have less lines of code.
And essentially when it comes to the label text, we're just using for the values that are in Camelcase,
for example, last.
And as a result.
The label text is not in a camel case.
It's simply a text value.
Hopefully that's clear.
And now we're ready to move on to the next step.