1
00:00:00,180 --> 00:00:01,050
Not bad, not bad.

2
00:00:01,380 --> 00:00:03,690
We have our basic setup in place.

3
00:00:03,750 --> 00:00:04,920
We have our first input.

4
00:00:04,920 --> 00:00:08,130
We have the button that submits the form.

5
00:00:08,520 --> 00:00:14,340
So now we just need to add a few more inputs, correct one for password and then one for email.

6
00:00:14,910 --> 00:00:21,660
But if we take a look at our application, you can see that there's going to be a bunch of components

7
00:00:22,020 --> 00:00:24,120
that we will set up.

8
00:00:24,150 --> 00:00:25,530
We have those inputs.

9
00:00:26,130 --> 00:00:33,210
So in order for the profile, we use, the inputs for the jobs or use that and kind of what makes sense

10
00:00:33,750 --> 00:00:37,740
if we would set this one up as a separate component because that way?

11
00:00:38,970 --> 00:00:46,950
We won't have to copy and paste, so we can set this up as a component and then pretty much anywhere

12
00:00:47,250 --> 00:00:48,330
where we want to render that.

13
00:00:48,450 --> 00:00:50,250
We're just pass in the props.

14
00:00:50,970 --> 00:00:52,500
So here's what I want you to do.

15
00:00:53,430 --> 00:01:01,350
Go to a components folder and then create a formal dress and set up all the imports and exports.

16
00:01:01,500 --> 00:01:08,250
And what I mean by that is important in the next year export exported from the object and then imported

17
00:01:08,400 --> 00:01:09,200
in register.

18
00:01:09,720 --> 00:01:16,800
So those three steps and once you do that, go to a form formal and pretty much take whatever we have

19
00:01:16,800 --> 00:01:20,760
right now for input and just set it up using props.

20
00:01:21,740 --> 00:01:26,990
We're on notice the former owner component will be a type named value handled change and label text.

21
00:01:27,410 --> 00:01:33,380
And that's when I'll talk about once I set it up in a second and in here you basically want to take

22
00:01:33,500 --> 00:01:38,360
there the label, the input and just assign them to the props.

23
00:01:39,110 --> 00:01:43,640
And once you do that, then in the register, you can add two more.

24
00:01:43,790 --> 00:01:45,500
One for email and password.

25
00:01:46,010 --> 00:01:52,630
Just keep in mind that for email and password types are different, names will be different.

26
00:01:52,640 --> 00:01:55,970
And also the value in initial state will be different.

27
00:01:56,780 --> 00:02:01,370
The handle change will be exactly the same, but not the first three.

28
00:02:02,060 --> 00:02:05,750
And once you're ready to go, resume the video and watch how I do it.

29
00:02:06,230 --> 00:02:09,740
So first, we need to navigate over to the components, correct?

30
00:02:10,919 --> 00:02:17,690
So let's get ourselves there, and then let's just say form row, yes.

31
00:02:18,300 --> 00:02:21,060
And then I simply want to take what I have in the register.

32
00:02:21,390 --> 00:02:25,380
So I'm going to set it up right away and then I'll deal with imports and exports.

33
00:02:25,390 --> 00:02:26,880
That's really up to you all.

34
00:02:26,880 --> 00:02:27,480
You want to do it.

35
00:02:27,840 --> 00:02:29,400
So I'm just going to take a risk.

36
00:02:29,610 --> 00:02:30,810
So cut it out here.

37
00:02:31,860 --> 00:02:34,380
And in fact, in a form row.

38
00:02:34,710 --> 00:02:36,900
Well, first, I want to create the component correct.

39
00:02:37,380 --> 00:02:39,540
So I just go with our snippet.

40
00:02:39,960 --> 00:02:41,370
And then as far as their turn.

41
00:02:41,440 --> 00:02:42,720
Well, let's copy and paste.

42
00:02:43,270 --> 00:02:50,970
Like I said, this component will be looking for the props because every time I want an input, well,

43
00:02:51,120 --> 00:02:51,810
I'll just pass it.

44
00:02:51,810 --> 00:02:54,570
And what kind of input and what are the things that we're looking for?

45
00:02:54,600 --> 00:02:59,190
Well, we want to get the type, we want to get the name, we want to get the value, we want to get

46
00:02:59,190 --> 00:03:00,180
the handle change.

47
00:03:00,630 --> 00:03:02,850
And we also want to get a label text.

48
00:03:03,180 --> 00:03:05,190
Now why we're getting a label text?

49
00:03:05,220 --> 00:03:12,710
Well, because there's going to be some instances where the variable in the state will have a common

50
00:03:12,720 --> 00:03:13,230
case name.

51
00:03:13,860 --> 00:03:20,110
But then as far as the label, I want to showcase a proper name and the way we'll set it up.

52
00:03:20,130 --> 00:03:27,810
I'll say if the label text prop is passed and then use that water, if not, then just use a regular

53
00:03:27,810 --> 00:03:28,080
name.

54
00:03:28,440 --> 00:03:34,200
So what you need to understand is that there's going to be some instances where state value is not going

55
00:03:34,200 --> 00:03:37,020
to match exactly like we have right now where we have a name.

56
00:03:37,410 --> 00:03:42,570
Imagine if you were to have their first name, but I still want to showcase the name and that's where

57
00:03:42,570 --> 00:03:44,490
the label comes into play.

58
00:03:44,500 --> 00:03:47,220
And this will probably make sense way more.

59
00:03:47,550 --> 00:03:48,870
The first time we'll have to use it.

60
00:03:49,680 --> 00:03:51,300
So for now, just focus on these ones.

61
00:03:51,300 --> 00:03:54,880
And then again, this one will be only used if it's actually passed.

62
00:03:54,900 --> 00:03:56,760
And if not, we'll still use the name.

63
00:03:57,120 --> 00:04:00,360
And now let's assign these values to our props.

64
00:04:00,960 --> 00:04:07,080
So instead of hard coding the name, I'll say whatever is the name prop now, class stays the same.

65
00:04:07,380 --> 00:04:08,850
And here next.

66
00:04:08,940 --> 00:04:11,370
Yep, this is what I'll call the label text.

67
00:04:11,370 --> 00:04:14,610
If it's passed, then if not, then we'll just go with name.

68
00:04:15,550 --> 00:04:16,839
Then as far as the type.

69
00:04:16,899 --> 00:04:19,980
Well, the moment we have already a problem.

70
00:04:20,269 --> 00:04:20,589
Right?

71
00:04:21,040 --> 00:04:22,870
So let's set up here a type.

72
00:04:23,720 --> 00:04:27,810
And as far as the value, well, we'll pass it in.

73
00:04:27,820 --> 00:04:32,890
So we simply want to switch this around where we're not looking for the values anymore.

74
00:04:32,940 --> 00:04:36,630
We're looking for a value prop and name.

75
00:04:36,640 --> 00:04:39,190
Well, that will be equal to your name.

76
00:04:39,550 --> 00:04:45,340
And then how do you change stays exactly the same because now it's going to be a prop and then we're

77
00:04:45,340 --> 00:04:48,820
just passing it from the parent container.

78
00:04:49,240 --> 00:04:50,380
So I set this on up.

79
00:04:50,740 --> 00:04:56,890
I have the default export, so now I simply want to go to my index and this is the case where we can

80
00:04:56,890 --> 00:04:58,900
use the nice on our import.

81
00:04:59,320 --> 00:05:04,240
And basically, my preference is something like this where I go with form and row.

82
00:05:04,570 --> 00:05:07,900
I imported here and now I just want to place it in this object.

83
00:05:08,080 --> 00:05:12,280
So I moved down when I need to add a comma just to have a proper syntax.

84
00:05:12,610 --> 00:05:18,610
Now might bring back some things here and we also need to save the register and then.

85
00:05:19,560 --> 00:05:26,580
Once I'm back in the register, not only I want to get local, but I'm also looking for that family.

86
00:05:26,850 --> 00:05:31,020
So let's say here, form row and once we import.

87
00:05:31,260 --> 00:05:32,440
Now I can scroll down.

88
00:05:32,880 --> 00:05:34,530
And now, what do we want to do?

89
00:05:34,650 --> 00:05:37,110
We want to pass in those props.

90
00:05:37,560 --> 00:05:37,840
Correct.

91
00:05:38,340 --> 00:05:44,240
And not only we want to pass in the props for the moment, but we also want to do the same thing for

92
00:05:44,250 --> 00:05:45,900
email and password.

93
00:05:46,230 --> 00:05:47,670
So let's go here with form row.

94
00:05:47,980 --> 00:05:51,220
And as far as the name, it's going to be like this.

95
00:05:51,240 --> 00:05:53,850
We're going to go with pipe and pipe will be taxed.

96
00:05:54,720 --> 00:05:56,970
That name will be equal to name.

97
00:05:57,660 --> 00:06:02,640
And then also the value will be equal to values and name.

98
00:06:03,240 --> 00:06:07,350
And then lastly, I know change will be equal to a channel change.

99
00:06:07,800 --> 00:06:12,780
So essentially now we just set up everything in the component instead of hard coding.

100
00:06:13,080 --> 00:06:14,880
So this value will still be the same.

101
00:06:15,180 --> 00:06:18,930
And also, once we click on it, we'll still trigger D.A. change.

102
00:06:19,410 --> 00:06:22,860
But now I can reuse it all throughout my project.

103
00:06:23,250 --> 00:06:25,410
So now let's take this, including the comment.

104
00:06:25,650 --> 00:06:27,420
I think it's going to be easier that way.

105
00:06:28,290 --> 00:06:32,730
Let's copy and paste and just be careful when you're setting up these rallies because it's very easy

106
00:06:33,030 --> 00:06:34,900
to make some kind of mistake.

107
00:06:34,920 --> 00:06:39,810
So first of all, this is not going to be an event, but we're going to go with email one.

108
00:06:40,020 --> 00:06:42,660
As far as the type, well, it's not a text anymore.

109
00:06:42,900 --> 00:06:49,260
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.

110
00:06:49,620 --> 00:06:55,500
And as far as the value, well, now we're looking in the state and we go with the email and that's

111
00:06:55,500 --> 00:06:56,220
the cool thing.

112
00:06:56,520 --> 00:07:00,480
If you set it up here as an object, I can basically use the same function.

113
00:07:01,140 --> 00:07:07,020
So the handle change will access both the name of the input as well as the value.

114
00:07:07,380 --> 00:07:11,040
And then I'll just access the proper thing here in my initial state.

115
00:07:11,280 --> 00:07:14,160
So that's why I don't have to change anything about this function.

116
00:07:14,760 --> 00:07:19,680
It's assigned to a prop and then it's triggered in the form room and the same goes for password.

117
00:07:20,550 --> 00:07:21,990
So I'm going to go here with password.

118
00:07:22,650 --> 00:07:25,800
And then as far as the type, yep, it's going to be a password type.

119
00:07:26,580 --> 00:07:27,960
So it's set up your password.

120
00:07:28,260 --> 00:07:28,830
My name?

121
00:07:29,040 --> 00:07:29,340
Yep.

122
00:07:29,580 --> 00:07:36,930
Same password and mine value are looking in the values and we're looking for password.

123
00:07:37,210 --> 00:07:40,890
And like I just mentioned, I'm going to change stays exactly the same.

124
00:07:41,340 --> 00:07:47,700
So once I have all of them in place again, let's navigate to the big screen and let's just quickly

125
00:07:48,120 --> 00:07:49,800
click on one of them just so we can see.

126
00:07:50,200 --> 00:07:59,040
Notice now I'm getting the name, email and the value that actually matches my email in the state and

127
00:07:59,160 --> 00:07:59,760
the same place.

128
00:08:00,150 --> 00:08:02,610
Now I can do the same thing with alert.