1
00:00:00,110 --> 00:00:00,500
All right.

2
00:00:00,500 --> 00:00:06,130
And once we have the register page with one input, let's add the rest of the inputs.

3
00:00:06,140 --> 00:00:10,790
But before we do that, let's take a look at our return.

4
00:00:10,820 --> 00:00:19,010
Notice how we have the div, the label, the input, and if we'll add rest of the inputs for last name,

5
00:00:19,010 --> 00:00:20,780
location, email and password.

6
00:00:20,870 --> 00:00:21,680
Well.

7
00:00:22,610 --> 00:00:31,040
Our return is going to be quite big and in my opinion, hard to navigate around and hard to manage.

8
00:00:31,040 --> 00:00:38,180
So a better option if we know that we'll have a bunch of inputs, which we will, is to set up a component

9
00:00:38,570 --> 00:00:41,360
where effectively we can group.

10
00:00:41,830 --> 00:00:42,630
Everything.

11
00:00:42,640 --> 00:00:44,680
What do we have inside of this div?

12
00:00:44,740 --> 00:00:46,120
And essentially.

13
00:00:47,190 --> 00:00:51,570
We can nicely just set up these values as props.

14
00:00:51,570 --> 00:00:57,540
So if we want different type, then of course we'll pass in the type the ID and hopefully you see where

15
00:00:57,540 --> 00:00:58,560
I'm going with this.

16
00:00:58,590 --> 00:01:03,930
Again, this is the case where I know that I'll have a bunch of inputs, so I might as well create the

17
00:01:03,930 --> 00:01:04,860
component.

18
00:01:04,860 --> 00:01:11,640
And that way, if I ever need to change something about this particular structure, I can do it in one

19
00:01:11,640 --> 00:01:12,030
place.

20
00:01:12,030 --> 00:01:16,050
Because keep in mind, if I'll copy and paste this, let's say 15 times and then I'll say, You know

21
00:01:16,050 --> 00:01:18,110
what, actually, I don't want to use required.

22
00:01:18,120 --> 00:01:21,750
Well, I'll have to go to all of those instances and pretty much.

23
00:01:22,620 --> 00:01:24,020
Remove this manually.

24
00:01:24,030 --> 00:01:27,570
So in order to set it up, we want to go to components.

25
00:01:27,810 --> 00:01:30,420
In my case, I'm going to call this a form a row.

26
00:01:30,610 --> 00:01:31,790
JS.

27
00:01:32,250 --> 00:01:36,510
Of course, in this case, and effectively I just want to grab that return.

28
00:01:36,510 --> 00:01:39,360
So let me first navigate to a register.

29
00:01:39,690 --> 00:01:43,620
Let me grab everything here in this form row.

30
00:01:45,030 --> 00:01:47,730
Then in here, let's create the component.

31
00:01:47,730 --> 00:01:48,570
Okay, good.

32
00:01:48,570 --> 00:01:50,520
And then this is what we want to return.

33
00:01:50,520 --> 00:01:55,950
And we just need to decide what kind of props we're going to pass.

34
00:01:55,950 --> 00:01:57,600
So we have the label.

35
00:01:57,630 --> 00:02:00,630
Label is going to have here the ID, Correct.

36
00:02:00,660 --> 00:02:03,270
Now, what is this ID going to be equal to?

37
00:02:03,270 --> 00:02:07,170
Well, whatever we have here as far as the name value, correct.

38
00:02:07,170 --> 00:02:11,760
So first, let's just add the props we're going to pass.

39
00:02:11,850 --> 00:02:15,180
So there's going to be a type prop effectively.

40
00:02:15,180 --> 00:02:20,310
At the moment it's text, but of course it can be email, it can be password and all that.

41
00:02:20,340 --> 00:02:21,870
We'll pass in the name.

42
00:02:21,900 --> 00:02:27,900
We'll also pass in the label text, which is going to make sense once we get to the last name.

43
00:02:27,900 --> 00:02:30,090
So for now, let's just not worry about it.

44
00:02:30,090 --> 00:02:35,520
But once we get to the last name, we'll return to this topic and also we want to pass in the default

45
00:02:35,520 --> 00:02:36,120
value.

46
00:02:36,150 --> 00:02:41,670
So these are going to be our props now as far as our return.

47
00:02:41,670 --> 00:02:46,390
So this one will be actually equal to whatever is the value.

48
00:02:46,390 --> 00:02:48,670
Again, in this case, it's name equals to name.

49
00:02:48,670 --> 00:02:51,160
So it looks a little bit funky, but.

50
00:02:51,960 --> 00:02:53,880
Hopefully you see why we're doing that.

51
00:02:53,910 --> 00:03:00,180
Then here, instead of the label, this is where I'm going to go with label, text or name.

52
00:03:00,180 --> 00:03:05,340
Again, something which is going to make sense once we set up, for example, last name.

53
00:03:05,340 --> 00:03:08,490
So if we provide some value for label text prop.

54
00:03:08,490 --> 00:03:09,510
Yep, we'll use that.

55
00:03:09,510 --> 00:03:13,320
If not, it's always going to be equal to name.

56
00:03:13,320 --> 00:03:17,310
Then type is equal to whatever is going to be our prop.

57
00:03:17,340 --> 00:03:21,000
Then id same deal equals to our name.

58
00:03:21,000 --> 00:03:24,390
Prop name equals to of course our name prop.

59
00:03:24,420 --> 00:03:24,840
Yep.

60
00:03:24,840 --> 00:03:25,830
That stays the same.

61
00:03:25,830 --> 00:03:28,770
And then when it comes to default value, well.

62
00:03:29,680 --> 00:03:35,530
Either it's going to be equal to our prop or if it's not provided, well, then simply we'll go with

63
00:03:35,530 --> 00:03:39,630
or and we'll say equals to an empty string.

64
00:03:39,640 --> 00:03:44,260
So now let's navigate to index.js in the components.

65
00:03:44,830 --> 00:03:46,090
That's what we're looking for.

66
00:03:46,090 --> 00:03:46,360
Now.

67
00:03:46,360 --> 00:03:49,840
I went to the pages we want to copy and paste.

68
00:03:50,260 --> 00:03:52,600
We want to rename.

69
00:03:53,930 --> 00:03:55,460
Form row.

70
00:03:55,970 --> 00:03:58,490
Let's say that and then back in the register.

71
00:03:59,430 --> 00:04:02,700
Effectively we want to add few more inputs.

72
00:04:02,730 --> 00:04:09,660
So right after the register we're going to go with form row coming from the components.

73
00:04:09,660 --> 00:04:17,490
And in this case we're going to go with type is equal to text and name is equal to name, correct.

74
00:04:17,519 --> 00:04:18,750
Let's close it.

75
00:04:18,899 --> 00:04:20,040
Let's save it.

76
00:04:20,040 --> 00:04:28,290
And also, like I said, while we're setting up the register and login functionality, I also want to

77
00:04:28,290 --> 00:04:29,670
use some default values.

78
00:04:29,670 --> 00:04:32,640
So in this case, I'm going to go with John.

79
00:04:32,730 --> 00:04:33,810
Let's save that.

80
00:04:33,840 --> 00:04:34,290
Yep.

81
00:04:34,290 --> 00:04:39,960
This is what we should see on the screen and now we just want to copy and paste and set up one for last

82
00:04:39,960 --> 00:04:42,930
name, location, email and password.

83
00:04:42,930 --> 00:04:44,370
So let me copy and paste.

84
00:04:44,370 --> 00:04:48,090
I believe what one, two, three, four times.

85
00:04:48,090 --> 00:04:48,840
So.

86
00:04:49,750 --> 00:04:52,270
This should be the result.

87
00:04:52,270 --> 00:04:54,640
And then the second one is going to be the last name.

88
00:04:54,640 --> 00:04:56,170
And notice something interesting.

89
00:04:56,290 --> 00:05:01,090
If I'm going to go here and if I'll type last name, which is going to be the name.

90
00:05:01,090 --> 00:05:03,310
So this is what we're going to be sending.

91
00:05:03,430 --> 00:05:11,680
The annoying part right now is that since we're using the name notice, the label text is Camelcase,

92
00:05:11,710 --> 00:05:13,660
which is probably not the best look.

93
00:05:13,750 --> 00:05:20,420
And therefore we have that label text prop where essentially we just set up a text for the label.

94
00:05:20,440 --> 00:05:25,630
Again, this is what we're going to be sending to our server.

95
00:05:25,630 --> 00:05:30,520
But as far as the label text, well I want to display something else and therefore I'm going to go with

96
00:05:30,520 --> 00:05:33,640
last name, just like other ones.

97
00:05:33,640 --> 00:05:35,170
Of course, it's totally optional.

98
00:05:36,120 --> 00:05:37,370
You don't want to use it.

99
00:05:37,370 --> 00:05:40,550
And in this case, I'm going to go with a Smith.

100
00:05:40,940 --> 00:05:42,740
That's going to be my default value.

101
00:05:42,770 --> 00:05:43,950
Let me refresh.

102
00:05:43,970 --> 00:05:44,510
Yep.

103
00:05:44,720 --> 00:05:49,520
Then the next one is the location one where we go with text.

104
00:05:49,670 --> 00:05:51,530
So type stays the same.

105
00:05:52,340 --> 00:05:55,880
And then the value here is going to be location.

106
00:05:55,910 --> 00:05:58,400
Now, the default one, I don't know.

107
00:05:58,760 --> 00:06:00,650
Type Earth, for example.

108
00:06:01,470 --> 00:06:02,430
That's a good value.

109
00:06:02,430 --> 00:06:03,540
Again, we can refresh.

110
00:06:03,540 --> 00:06:04,830
And now we have this one.

111
00:06:05,730 --> 00:06:09,150
Then we have one for type email.

112
00:06:10,120 --> 00:06:12,570
And the name is going to be equal to an email.

113
00:06:13,980 --> 00:06:16,800
Email default value will be.

114
00:06:17,650 --> 00:06:19,090
John at.

115
00:06:20,100 --> 00:06:21,270
Gmail.com.

116
00:06:21,920 --> 00:06:25,490
And then the last one is going to be type password.

117
00:06:26,420 --> 00:06:27,470
The name.

118
00:06:28,410 --> 00:06:32,520
Is going to be equal to a password and then default value.

119
00:06:32,760 --> 00:06:34,720
Let's just write secret.

120
00:06:35,640 --> 00:06:36,810
One, two, three.

121
00:06:37,440 --> 00:06:38,770
Let's save all of this.

122
00:06:38,790 --> 00:06:39,660
Let's refresh.

123
00:06:39,660 --> 00:06:42,370
And this is what we should see on the screen.

124
00:06:42,390 --> 00:06:47,130
Again, we created a formal component where we are grabbing the props and.

125
00:06:48,040 --> 00:06:51,460
As a result, our return is cleaner.

126
00:06:51,490 --> 00:06:54,730
Basically, we have less lines of code.

127
00:06:54,730 --> 00:07:03,190
And essentially when it comes to the label text, we're just using for the values that are in Camelcase,

128
00:07:03,190 --> 00:07:04,510
for example, last.

129
00:07:05,380 --> 00:07:07,570
And as a result.

130
00:07:08,620 --> 00:07:11,350
The label text is not in a camel case.

131
00:07:11,380 --> 00:07:13,900
It's simply a text value.

132
00:07:13,930 --> 00:07:15,160
Hopefully that's clear.

133
00:07:15,220 --> 00:07:18,430
And now we're ready to move on to the next step.