1
00:00:08,220 --> 00:00:09,270
In this video.

2
00:00:09,270 --> 00:00:16,079
Let's see how we can handle four in react four for handling in React.

3
00:00:16,079 --> 00:00:18,300
We have couple of ways of doing it.

4
00:00:18,540 --> 00:00:25,410
You can use a third party package like for me to do that one or we can do it by ourself.

5
00:00:25,590 --> 00:00:31,910
In this case, we are going to handle the form by ourself without using any third party package.

6
00:00:31,920 --> 00:00:33,180
So let's see.

7
00:00:33,390 --> 00:00:36,930
So inside the log in component, this where we left.

8
00:00:37,020 --> 00:00:43,470
Let's bring in what is called the You States, because we need to manage in ten states.

9
00:00:43,920 --> 00:00:45,340
So let's get started.

10
00:00:45,360 --> 00:00:46,620
Here we go.

11
00:00:46,650 --> 00:00:48,890
You state by default.

12
00:00:48,900 --> 00:00:50,380
This one is empty.

13
00:00:50,400 --> 00:00:56,640
That is the email field going to be as that and equal to that.

14
00:00:56,640 --> 00:00:59,760
And you have access to the email value here.

15
00:00:59,800 --> 00:01:02,910
The function to update course set email.

16
00:01:03,510 --> 00:01:03,890
Great.

17
00:01:04,140 --> 00:01:11,850
And the next one going to be the password when I be asked password and then the set password.

18
00:01:12,450 --> 00:01:20,730
But for this implementation, assuming that we have ten fields, let's look at the transaction in case

19
00:01:20,730 --> 00:01:22,450
we are trying to add transaction.

20
00:01:22,470 --> 00:01:29,540
You can see we have name type amount category, color date notes.

21
00:01:29,730 --> 00:01:37,020
It means that we are going to create instances of you state almost five times or seven times and you

22
00:01:37,020 --> 00:01:39,660
will see that our component will be missing.

23
00:01:39,810 --> 00:01:44,460
So to avoid that, I'm going to show you the different way of handling form.

24
00:01:44,460 --> 00:01:45,720
So here you go.

25
00:01:45,870 --> 00:01:48,750
Let's remove all this one from here.

26
00:01:48,780 --> 00:01:51,300
Let's bring in the you states.

27
00:01:51,600 --> 00:01:56,320
But for this one, we are going to pass in the fields that we want to manage.

28
00:01:56,340 --> 00:02:00,690
So the first one is going to be the email by default is empty.

29
00:02:00,690 --> 00:02:07,080
And then the password also by default is also empty.

30
00:02:07,380 --> 00:02:07,700
Great.

31
00:02:07,920 --> 00:02:14,150
So what comes back is the actual state and then the function to update the state.

32
00:02:14,160 --> 00:02:17,670
So here I'll call this one, ask for data.

33
00:02:17,670 --> 00:02:21,300
And then what is called the sets form data.

34
00:02:22,520 --> 00:02:28,970
The next step is that I can go ahead and then structure the phone data that represents this one.

35
00:02:28,970 --> 00:02:30,440
So here we go.

36
00:02:30,440 --> 00:02:39,830
Const object is equal to the for data and I want the email and then the password.

37
00:02:39,950 --> 00:02:40,580
Great.

38
00:02:40,580 --> 00:02:43,040
So let's have a comment and call this one.

39
00:02:43,040 --> 00:02:52,220
As for data, the next step is that on each of the inputs, we are going to add an attribute called

40
00:02:52,220 --> 00:02:55,460
name and this one is called email.

41
00:02:55,730 --> 00:03:01,880
The next one is the password, so let's provide the password as a name.

42
00:03:02,150 --> 00:03:06,560
It must be the same as we see inside the initial state here.

43
00:03:06,800 --> 00:03:10,250
So next step is the own change.

44
00:03:12,230 --> 00:03:14,360
And how are you going to handle that one?

45
00:03:14,390 --> 00:03:16,670
Let me show you here, costs.

46
00:03:16,760 --> 00:03:19,490
I'll make this one as unchanged.

47
00:03:21,590 --> 00:03:27,920
Input and for this is equal to normal function as a function.

48
00:03:28,340 --> 00:03:38,360
And I have access to the E inside here and let's try and console that log says that on change triggered

49
00:03:38,690 --> 00:03:41,240
the next one going to be the submit.

50
00:03:41,240 --> 00:03:53,300
So this one going to be submit handler and it goes like this on submit handler and it's equal to normal

51
00:03:53,300 --> 00:03:54,200
function.

52
00:03:54,350 --> 00:03:57,350
And here I will have access to the event.

53
00:04:01,760 --> 00:04:03,980
And I have access to the event.

54
00:04:03,980 --> 00:04:09,020
So here too, I can continue the blog and say that submitted.

55
00:04:10,580 --> 00:04:13,210
So next is let's bind to the form.

56
00:04:13,220 --> 00:04:16,519
Let's remove the action and provide on submit.

57
00:04:16,519 --> 00:04:19,730
And the function is called on submit.

58
00:04:20,930 --> 00:04:21,310
Until.

59
00:04:24,090 --> 00:04:24,690
Great.

60
00:04:24,810 --> 00:04:30,350
So let's locate the button for sine app and this is a button to click.

61
00:04:30,360 --> 00:04:35,610
So let's change this one to button and let's remove the h ref.

62
00:04:35,610 --> 00:04:39,150
But instead let's provide a type of subnet.

63
00:04:40,320 --> 00:04:42,340
So now we can try it out.

64
00:04:42,360 --> 00:04:45,780
So let's open the console and let's play this one.

65
00:04:45,780 --> 00:04:48,990
And now let's provide some dummy email.

66
00:04:49,680 --> 00:04:52,740
Password is also dummy password and let's hit send.

67
00:04:52,800 --> 00:04:59,790
And you can see that we saw some message, but all of a sudden it vanishes because we are refreshing

68
00:04:59,820 --> 00:05:02,670
our application upon submitting.

69
00:05:02,670 --> 00:05:08,070
So to avoid that, we are going to use the event type to prevent that.

70
00:05:08,070 --> 00:05:09,330
So here you go.

71
00:05:09,600 --> 00:05:12,600
E dot prevents default.

72
00:05:14,300 --> 00:05:16,820
And now let's check it out again.

73
00:05:17,750 --> 00:05:20,180
Let me clear my console here.

74
00:05:20,210 --> 00:05:25,260
Let me add anything here and the password in it.

75
00:05:25,260 --> 00:05:26,210
Then hit send.

76
00:05:26,210 --> 00:05:29,300
And now you can see that we have submitted.

77
00:05:29,600 --> 00:05:32,690
The next one is going to be the change.

78
00:05:32,690 --> 00:05:36,200
Let's by the on change to the individual input.

79
00:05:36,380 --> 00:05:40,580
So for email, let's add a value called email.

80
00:05:40,610 --> 00:05:45,770
Remember, we have the structure, the form data here for this one.

81
00:05:46,070 --> 00:05:55,560
So the next one going to be the on change and going to be as on change input.

82
00:05:56,150 --> 00:05:58,220
So I can copy this one.

83
00:05:58,220 --> 00:06:01,290
And now down here that is a password PC.

84
00:06:01,370 --> 00:06:05,510
And now the value two is going to be as password.

85
00:06:05,840 --> 00:06:07,580
Now let's check it out.

86
00:06:07,610 --> 00:06:10,350
Let's play the console when I tap anything.

87
00:06:10,370 --> 00:06:12,470
You can see that it's being triggered.

88
00:06:12,470 --> 00:06:12,910
Like what?

89
00:06:12,920 --> 00:06:15,170
The password is also triggered.

90
00:06:15,200 --> 00:06:17,840
Now we have two way binding.

91
00:06:18,170 --> 00:06:24,510
The next step is that I need to dispatch the action or my function to log in.

92
00:06:24,530 --> 00:06:27,080
So now moment of truth.

93
00:06:27,260 --> 00:06:32,180
But to be able to achieve that, we need to update our states.

94
00:06:32,180 --> 00:06:33,990
So how are we going to do it?

95
00:06:34,010 --> 00:06:36,910
And we are going to do this one in a strange way.

96
00:06:36,920 --> 00:06:39,890
But I explain to you to make it very simple.

97
00:06:39,920 --> 00:06:41,450
So here we go.

98
00:06:41,480 --> 00:06:48,200
We take the set from data, and then as a function call, we are going to pass it an object.

99
00:06:48,200 --> 00:06:53,030
So here we are going to spread all the initial form data.

100
00:06:53,240 --> 00:06:59,840
The next argument is how we are going to add the individual field and I'm going to use this syntax that

101
00:06:59,840 --> 00:07:00,740
is the bracket.

102
00:07:00,740 --> 00:07:05,420
And next is we pass in the e dot target.

103
00:07:07,210 --> 00:07:08,890
Dog's name.

104
00:07:09,220 --> 00:07:10,870
So what does it mean?

105
00:07:10,960 --> 00:07:16,900
This simply means that we are taking the input name as a property.

106
00:07:17,110 --> 00:07:24,460
And remember, for each of the inputs we have the name, email, and then the password, which is equal

107
00:07:24,460 --> 00:07:28,000
to the initial state value here or properties here.

108
00:07:28,180 --> 00:07:35,020
So if you try to console that log E to target name, we are going to see the names.

109
00:07:35,020 --> 00:07:37,870
So let me do that one before I continue.

110
00:07:37,930 --> 00:07:43,210
And let me paste that and let me comment this one out first and now let's check it out.

111
00:07:43,420 --> 00:07:45,730
So here, let's open the console.

112
00:07:45,730 --> 00:07:47,890
Well, and let's refresh let me clear it.

113
00:07:47,890 --> 00:07:53,550
And now when I type in here, you can see that I have the email for the password.

114
00:07:53,560 --> 00:07:58,030
I also have the password, so I'm going to use this one as a property.

115
00:07:58,120 --> 00:07:59,740
So here we go.

116
00:07:59,770 --> 00:08:01,570
I can now bring it back.

117
00:08:01,810 --> 00:08:06,250
And that and the value is going to be as this.

118
00:08:07,610 --> 00:08:12,640
Cullen and e dot target dot value for this one.

119
00:08:12,650 --> 00:08:14,060
We know it already.

120
00:08:14,060 --> 00:08:17,690
So let's remove this one and now let's try again.

121
00:08:17,720 --> 00:08:21,620
I can see I cannot type anything here and it's working fine.

122
00:08:21,620 --> 00:08:23,480
So let me close this one.

123
00:08:23,480 --> 00:08:29,210
And now let's go ahead and call our function and pass in the form data.

124
00:08:29,210 --> 00:08:33,650
So inside this, submit this where I want to call the action.

125
00:08:33,650 --> 00:08:37,490
So here are going to be as dispatch action.

126
00:08:38,030 --> 00:08:44,360
So here I'm going to call log in user action now pass in the entire form data.

127
00:08:44,360 --> 00:08:48,080
So now moment of truth, are you ready?

128
00:08:48,080 --> 00:08:55,910
So we are going to have a feedback inside the of context and which is this one remember we are console.log

129
00:08:55,910 --> 00:08:58,370
again the success, likewise the error.

130
00:08:58,550 --> 00:09:02,420
But for this we are going to face some beautiful error.

131
00:09:02,450 --> 00:09:06,110
So let's see and then I'll explain to you what it means.

132
00:09:06,110 --> 00:09:08,060
So now here we go.

133
00:09:08,090 --> 00:09:13,010
Let's provide an account that exists that is the atom and gmail.com.

134
00:09:13,010 --> 00:09:14,450
So copy that one.

135
00:09:14,450 --> 00:09:16,250
And now let me pass it here.

136
00:09:16,250 --> 00:09:21,440
And the password is one, two, three, four, five, one, two, three, four, five.

137
00:09:21,440 --> 00:09:23,960
And now let's open our console here.

138
00:09:23,960 --> 00:09:26,390
Let's click it before I hit send.

139
00:09:26,870 --> 00:09:32,150
And you can see that we got what is called pending, meaning that we are not handling the problem as

140
00:09:32,150 --> 00:09:32,630
well.

141
00:09:32,810 --> 00:09:36,320
So here I need to put a wait in front of it.

142
00:09:36,320 --> 00:09:37,910
So I store.

143
00:09:37,970 --> 00:09:42,530
We are going to face some beautiful error that I'm trying to refer to.

144
00:09:42,740 --> 00:09:43,340
Okay.

145
00:09:43,430 --> 00:09:49,490
So here, let me add the email here and then any password here.

146
00:09:49,490 --> 00:09:54,200
And now let me hit send and you can see that we got beautiful error.

147
00:09:54,380 --> 00:09:57,500
So let's go open it and read more about this error.

148
00:09:58,040 --> 00:10:04,610
This kind of error is not caused by us, but at the same time you don't know what kind of error it is.

149
00:10:04,610 --> 00:10:12,170
So to know more about this error, let's play this one and now click on network and now let's click

150
00:10:12,170 --> 00:10:16,190
everything by clicking on this one and let's try again.

151
00:10:16,490 --> 00:10:19,460
All right, so let me click on the sign in.

152
00:10:19,460 --> 00:10:25,010
And now here we have the name that is the path called Let's Look In.

153
00:10:25,010 --> 00:10:26,300
And now instead stutters.

154
00:10:26,390 --> 00:10:32,060
We have this error called course and this is what I'm trying to refer to.

155
00:10:32,120 --> 00:10:33,560
So what is caused?

156
00:10:33,590 --> 00:10:39,110
Well, before I explain, let's click on the log in and here we have headers.

157
00:10:39,110 --> 00:10:40,310
Let's click on that.

158
00:10:40,310 --> 00:10:43,610
And this is a URL that we are requesting.

159
00:10:43,610 --> 00:10:50,150
And if you go to payload, this is the data that we are trying to send to the server and there is no

160
00:10:50,150 --> 00:10:50,900
preview.

161
00:10:50,900 --> 00:10:52,250
Likewise response.

162
00:10:52,250 --> 00:10:54,770
So back to the course error.

163
00:10:55,130 --> 00:11:01,910
When we say cross error, it simply means that if we are trying to access a resource from a certain

164
00:11:01,910 --> 00:11:11,570
server into a different server, in our case from our backend server into React server, and this security

165
00:11:11,570 --> 00:11:21,050
is really important because we shouldn't allow any server to access our API unless we tell our server

166
00:11:21,050 --> 00:11:28,880
that hey server just receive or send data to this server who is trying to access the resources.

167
00:11:28,880 --> 00:11:36,020
Because of that, we are going to configure our express server a little bit to be able to trust this

168
00:11:36,020 --> 00:11:44,660
server, and that is our React application because our application is running on Port 3000 and our server

169
00:11:44,660 --> 00:11:47,030
is running on Port 8080.

170
00:11:47,030 --> 00:11:50,540
So it means that there are different servers altogether.