1 00:00:00,450 --> 00:00:01,560 Welcome back. 2 00:00:01,589 --> 00:00:08,790 In the previous video, we were able to have a complete form online like this, but we saw that we're 3 00:00:08,790 --> 00:00:13,260 facing a particular problem that is repetition of code. 4 00:00:13,290 --> 00:00:20,400 So if you go to forms and a register component, we see that we have individual input it with its own 5 00:00:20,620 --> 00:00:24,150 state and its own handler and change handler. 6 00:00:24,330 --> 00:00:31,800 So if you have 2020 input field, I want to have 20 initial state and 20 I mean on change handlers, 7 00:00:31,800 --> 00:00:33,150 which is not ideal. 8 00:00:33,180 --> 00:00:39,170 So let's make our life easier by having less code that's going to achieve the same concept. 9 00:00:39,180 --> 00:00:41,970 So let me show you how we are going to do this one. 10 00:00:42,210 --> 00:00:44,850 So now I don't want to tamper with this one. 11 00:00:45,000 --> 00:00:46,440 You can leave it as a reference. 12 00:00:46,440 --> 00:00:55,920 So I'm going to copy and paste and now I will rename this one as Register Part one, and now I will 13 00:00:55,920 --> 00:00:57,750 stick to this register component. 14 00:00:57,750 --> 00:01:03,330 So now let's remove everything from it and let's bring it to normal. 15 00:01:03,330 --> 00:01:11,580 So the change here, remove it values, remove it on change, remove it value, remove it on change, 16 00:01:11,580 --> 00:01:20,150 remove it and value remove it, save it and now well on change email this one to remove it I forgot, 17 00:01:20,160 --> 00:01:24,390 remove this one and now it's being brought back to normal. 18 00:01:24,410 --> 00:01:26,730 If I click on it, that is being refreshed. 19 00:01:26,910 --> 00:01:31,250 So how are we going to write less code to achieve the same effect? 20 00:01:31,260 --> 00:01:35,490 Well, so here let's keep track of the initial state. 21 00:01:35,490 --> 00:01:36,930 So let's compare this. 22 00:01:37,170 --> 00:01:38,220 This is a previous one. 23 00:01:38,220 --> 00:01:41,460 So let's go to simplify it in this video. 24 00:01:41,910 --> 00:01:45,330 So initial state here, how I will do it. 25 00:01:45,510 --> 00:01:51,660 Well, we are going to assign the result that's coming back from our new state. 26 00:01:52,020 --> 00:01:58,070 So use state here and now we have one. 27 00:01:58,080 --> 00:02:01,980 Only one object represents the entire form input. 28 00:02:01,980 --> 00:02:08,039 So here are called as form data and the function to set core set for data. 29 00:02:08,110 --> 00:02:11,790 We are going to specify whether it's email or password. 30 00:02:11,940 --> 00:02:16,620 So inside here I'm going to provide an object with the initial values. 31 00:02:16,620 --> 00:02:18,540 One we have full name. 32 00:02:19,930 --> 00:02:21,580 And it's empty string. 33 00:02:21,580 --> 00:02:31,570 And then we have the email also empty string and then the password or so as, as an empty string. 34 00:02:32,020 --> 00:02:37,960 So this line of code, this one is equal, same as this. 35 00:02:38,380 --> 00:02:41,470 So we simplify this one with only one line. 36 00:02:42,220 --> 00:02:43,340 Okay, good. 37 00:02:43,360 --> 00:02:51,880 So now if you try to console that, log the form data, let's see what we are going to achieve. 38 00:02:52,060 --> 00:02:53,650 So let's open the console. 39 00:02:53,650 --> 00:02:59,620 And now we have objects with the initial values being as an empty. 40 00:02:59,890 --> 00:03:05,110 So the next step is how can we bind the values? 41 00:03:05,110 --> 00:03:08,290 And it's pretty easy, as you may think. 42 00:03:08,710 --> 00:03:11,890 So let's provide a initial value here. 43 00:03:11,890 --> 00:03:17,740 I'll say ban for the meantime and let's say ban at gmail.com. 44 00:03:17,740 --> 00:03:20,940 And the password is one, two, three, four, five. 45 00:03:20,950 --> 00:03:28,030 And now let's see, nothing shows inside the input field because we are not binding, provide the value 46 00:03:28,030 --> 00:03:30,760 property on the input. 47 00:03:30,760 --> 00:03:34,390 So here provide a value and the value here is what? 48 00:03:34,390 --> 00:03:36,670 On the form data we have full name. 49 00:03:36,880 --> 00:03:38,680 So here. 50 00:03:39,770 --> 00:03:41,540 Good to be form data. 51 00:03:41,580 --> 00:03:43,480 Dot foo name. 52 00:03:43,490 --> 00:03:44,840 So let's see now. 53 00:03:44,840 --> 00:03:46,760 We have been inside that. 54 00:03:46,910 --> 00:03:56,120 So next one is let's provide let's copy the values here and onto the email chain, this one to email 55 00:03:56,360 --> 00:03:57,820 and then a password. 56 00:03:57,830 --> 00:04:01,100 Let's change this one to also password. 57 00:04:01,100 --> 00:04:04,940 Now everything is intact, the same as before. 58 00:04:05,510 --> 00:04:09,900 So how are we going to write the on change handler? 59 00:04:09,920 --> 00:04:11,690 Here comes the question. 60 00:04:11,900 --> 00:04:19,519 Well, since pay attention to what we are going to do inside this one, because it's a little bit tricky 61 00:04:19,519 --> 00:04:25,160 if I'm not familiar with what you are going to do, but I'll make it pretty easy. 62 00:04:25,400 --> 00:04:26,000 Okay. 63 00:04:26,180 --> 00:04:33,200 So I'm going to have only one or in change handler called the let me show you with code so I better 64 00:04:33,200 --> 00:04:36,350 understand what I'm trying to refer to. 65 00:04:36,980 --> 00:04:41,450 So here, comment here and say on change. 66 00:04:42,700 --> 00:04:43,930 On change. 67 00:04:45,080 --> 00:04:50,930 It can change and change like that. 68 00:04:51,440 --> 00:04:59,420 So here I would name it as un change handlers to concert and then UN change handler. 69 00:05:00,270 --> 00:05:02,130 Like that is equal to. 70 00:05:02,960 --> 00:05:04,700 This and that. 71 00:05:05,300 --> 00:05:05,960 Okay. 72 00:05:06,440 --> 00:05:11,870 So you are going to provide the same on change to all the input field. 73 00:05:11,870 --> 00:05:15,790 So here let's console.log the event. 74 00:05:15,830 --> 00:05:18,110 So let's provide us events here on the on chain. 75 00:05:18,120 --> 00:05:20,990 So now let's bind this one to the individual input here. 76 00:05:21,200 --> 00:05:28,550 So on change is not on play, but instead is on change, it's going to be on change. 77 00:05:28,550 --> 00:05:38,330 Handler The same thing on all my input field provide that and next is provide that okay so we have the 78 00:05:38,330 --> 00:05:41,560 same on change handler on or yeah. 79 00:05:41,630 --> 00:05:42,890 On all my input field. 80 00:05:42,890 --> 00:05:52,100 So how React will be able to know that we are typing something inside the input field or the full name 81 00:05:52,100 --> 00:05:52,820 input field. 82 00:05:52,820 --> 00:05:55,400 So here comes the logic. 83 00:05:55,730 --> 00:06:02,630 Well we have the the function or the method to update which is called set from data. 84 00:06:02,630 --> 00:06:06,560 So inside here we provide set from data. 85 00:06:06,560 --> 00:06:09,050 And what do you want to update? 86 00:06:09,170 --> 00:06:17,300 So the first one is because an object, you bring an object and next is you spread the initial value, 87 00:06:17,300 --> 00:06:25,040 which is the form data, whatever you have it, let's bring it as what as my form data and come out. 88 00:06:25,160 --> 00:06:34,370 So the next step is we want to look at what particular field that we are trying to I mean, update or 89 00:06:34,490 --> 00:06:35,870 type in something. 90 00:06:35,870 --> 00:06:38,690 So we need to provide a name attribute. 91 00:06:38,840 --> 00:06:45,650 So this name attributes is going to be specific to each component, sorry to each input. 92 00:06:46,010 --> 00:06:50,540 So a name here equal to full name. 93 00:06:52,330 --> 00:06:52,880 Great. 94 00:06:52,900 --> 00:06:54,460 And next is let's copy this. 95 00:06:54,460 --> 00:07:02,980 One name here is going to be email and then name here is going to be password. 96 00:07:02,980 --> 00:07:05,890 You see that the previous one, we didn't have a name attribute. 97 00:07:05,890 --> 00:07:08,290 So now for this one we have it. 98 00:07:08,470 --> 00:07:13,720 So we want to know which field by targeting the name attributes. 99 00:07:13,960 --> 00:07:20,860 So inside my input through again if I type anything here, let me remove the initial values here and 100 00:07:20,860 --> 00:07:22,660 bring everything to. 101 00:07:23,660 --> 00:07:25,580 No more empty string. 102 00:07:26,540 --> 00:07:27,170 Okay. 103 00:07:27,260 --> 00:07:29,780 So now let's open the console. 104 00:07:31,670 --> 00:07:38,060 If I refresh it and I type anything here, I see that my event is being called that is inside my own 105 00:07:38,060 --> 00:07:39,080 change handler. 106 00:07:39,800 --> 00:07:46,220 So whereas so I cannot type in anything here because it doesn't know whether I'm typing the word into 107 00:07:46,220 --> 00:07:49,300 my input field here, this or this or that. 108 00:07:49,310 --> 00:07:49,900 It doesn't know. 109 00:07:49,910 --> 00:07:51,110 So we need to provide. 110 00:07:51,140 --> 00:07:59,000 So if you come up here inside my handler here after the the spreadsheet, let's say let's have one field 111 00:07:59,050 --> 00:08:03,710 called full name and we say the full name must be banned here. 112 00:08:04,250 --> 00:08:11,210 Now, with this one, I can be able to type in something because now it knows which field that is by 113 00:08:11,210 --> 00:08:11,900 full name. 114 00:08:12,140 --> 00:08:17,120 So now when I refresh that type, anything here like before we see that now I can type anything. 115 00:08:17,390 --> 00:08:22,340 But if I give it an empty string like this one, let's see if I refresh it. 116 00:08:22,520 --> 00:08:26,030 I cannot type because there is no value I'm typing in. 117 00:08:26,300 --> 00:08:29,030 So how are we going to get that? 118 00:08:29,030 --> 00:08:35,780 We can get the value from here as event dot target dot value as before. 119 00:08:35,780 --> 00:08:38,990 So event e dot target. 120 00:08:40,789 --> 00:08:45,080 Targets don't value all, only for the first one, the full name. 121 00:08:45,080 --> 00:08:47,120 So we have to laugh at something here. 122 00:08:47,150 --> 00:08:50,060 Now, I can type it now for the second one. 123 00:08:50,060 --> 00:08:51,590 Nope, nope. 124 00:08:51,590 --> 00:08:53,240 Only the first input field. 125 00:08:53,240 --> 00:08:53,930 Full name. 126 00:08:54,050 --> 00:08:57,470 So how can we make this name field more dynamic? 127 00:08:57,470 --> 00:09:02,870 And we are going to use a trick in JavaScript called computed value. 128 00:09:02,870 --> 00:09:11,360 So what is a computed value is a value or is an expression and close in a square bracket that can be 129 00:09:11,360 --> 00:09:13,400 used to define property names. 130 00:09:13,400 --> 00:09:20,600 So computed property names are especially useful when you want to use a variable as a property name. 131 00:09:20,930 --> 00:09:24,050 So let me show you an example what I mean by computed value here. 132 00:09:24,050 --> 00:09:28,220 So now let's move away from your act and come up here or let's come down here. 133 00:09:28,610 --> 00:09:31,820 So let's say that we have a variable called full. 134 00:09:33,340 --> 00:09:35,920 Is equal to, let's say, bar. 135 00:09:36,190 --> 00:09:40,570 And now I have my object contest and then let's say object. 136 00:09:40,600 --> 00:09:43,120 My object is equal to that. 137 00:09:43,420 --> 00:09:52,810 Now if I provide my square bracket here and then I provide foo here, the non seed foo is equal to a 138 00:09:52,810 --> 00:09:53,500 value. 139 00:09:53,860 --> 00:10:01,740 So if I console.log object, you see that we are going to have a fu as a property name. 140 00:10:01,750 --> 00:10:04,510 So the object hit my object. 141 00:10:04,690 --> 00:10:06,730 So now on line number 68. 142 00:10:06,760 --> 00:10:07,540 Have a look. 143 00:10:07,690 --> 00:10:09,190 Now let's refresh. 144 00:10:09,280 --> 00:10:15,640 You see, I have a bar called var a bar as a property name and var as my value. 145 00:10:15,670 --> 00:10:17,530 The bar is way from here. 146 00:10:17,530 --> 00:10:22,090 I'm using a value as a property name. 147 00:10:22,450 --> 00:10:29,770 So the same thing applies to let me remove this one, the same thing applies to my input free here. 148 00:10:29,780 --> 00:10:33,940 So we are going to use the dot name. 149 00:10:34,000 --> 00:10:40,570 I mean, if you target the or target name, it means you are targeting the name here and you are taking 150 00:10:40,570 --> 00:10:42,970 the value of the name as a field. 151 00:10:43,570 --> 00:10:44,560 That is crazy, right? 152 00:10:44,560 --> 00:10:46,000 So now let's remove this one. 153 00:10:46,090 --> 00:10:50,890 And now my square bracket e dot target. 154 00:10:51,730 --> 00:10:59,500 Target dot name now is equal to e dot target dot value and that is it. 155 00:10:59,500 --> 00:11:01,540 So now I'm good to go. 156 00:11:02,260 --> 00:11:07,090 So let's remove the event console, log that and now let's try it out again. 157 00:11:07,120 --> 00:11:11,470 Now I can type in here as Ben or Ben as I don't have Ben here. 158 00:11:11,680 --> 00:11:13,390 I cannot type in anything. 159 00:11:13,390 --> 00:11:14,680 Oh yeah. 160 00:11:14,680 --> 00:11:15,700 What about name. 161 00:11:15,790 --> 00:11:17,470 I'm not getting the full name. 162 00:11:18,130 --> 00:11:19,210 Meaning there's something wrong. 163 00:11:19,210 --> 00:11:21,400 Oh, I don't type it correctly. 164 00:11:21,430 --> 00:11:22,720 Is full name. 165 00:11:22,720 --> 00:11:23,470 Where is it. 166 00:11:24,500 --> 00:11:25,910 And, uh. 167 00:11:26,830 --> 00:11:27,460 Yeah. 168 00:11:27,760 --> 00:11:31,360 Oh, it's full name here, not 3.0. 169 00:11:31,390 --> 00:11:32,380 Sorry, guys. 170 00:11:32,830 --> 00:11:34,540 So I can type anything. 171 00:11:34,540 --> 00:11:40,690 Something here and something here and something or so here, and I can submit. 172 00:11:40,690 --> 00:11:43,120 And then I would be good to go. 173 00:11:43,300 --> 00:11:46,660 So that's how we able to handle that. 174 00:11:46,840 --> 00:11:50,080 So the next step is what my function to submit. 175 00:11:50,080 --> 00:11:52,120 So cost. 176 00:11:53,590 --> 00:11:54,550 Submit. 177 00:11:57,400 --> 00:11:58,810 Summit handler. 178 00:12:00,370 --> 00:12:04,900 Is equal to E and then I have up. 179 00:12:07,740 --> 00:12:11,100 E and then I can prevent. 180 00:12:11,130 --> 00:12:12,810 E dot prevent. 181 00:12:16,020 --> 00:12:18,240 Prevent default. 182 00:12:20,140 --> 00:12:20,740 Great. 183 00:12:20,770 --> 00:12:24,850 So now pass it to my form as on submit. 184 00:12:25,720 --> 00:12:33,270 Up on mates and then I pass in my submit handler and I'm good to go. 185 00:12:33,280 --> 00:12:36,370 So now I can console the log the. 186 00:12:37,270 --> 00:12:45,460 The form data of my initial value of form data, which is this. 187 00:12:46,220 --> 00:12:47,840 So now let's try it out and see. 188 00:12:48,170 --> 00:12:49,640 So let's refresh it. 189 00:12:49,640 --> 00:12:51,340 And now let's type anything here. 190 00:12:51,350 --> 00:12:54,980 Let's say Lily and let's say this one and pass. 191 00:12:55,010 --> 00:12:56,450 One, two, three, four, five. 192 00:12:56,930 --> 00:13:00,890 And submit where I get undefined, undefined, undefined. 193 00:13:00,920 --> 00:13:07,580 Meaning I'm not getting the actual value or sorry, it's supposed to be e dot value. 194 00:13:07,970 --> 00:13:09,800 Yes, that is my mistake. 195 00:13:10,220 --> 00:13:12,950 So now let's say full name is Lily. 196 00:13:12,950 --> 00:13:15,020 Email is lily at and password. 197 00:13:15,020 --> 00:13:16,270 One, two, three, four, five. 198 00:13:16,280 --> 00:13:18,470 When I click submit I have it. 199 00:13:18,800 --> 00:13:22,370 So it is equal same the one we did before. 200 00:13:22,940 --> 00:13:26,840 So that's how we handle forms in React.