1 00:00:00,150 --> 00:00:00,850 Beautiful job. 2 00:00:00,870 --> 00:00:08,010 Now we know how we can use our controlled inputs with our list and next hour want to showcase how we 3 00:00:08,010 --> 00:00:13,310 can have multiple inputs with the same on change handler. 4 00:00:13,830 --> 00:00:21,480 Now, the use case that I'm trying to showcase is the one with many, many, many, many inputs on my 5 00:00:21,480 --> 00:00:21,740 case. 6 00:00:21,750 --> 00:00:25,560 I'm just going to add one more to our current setup. 7 00:00:25,950 --> 00:00:33,120 But keep in mind that the whole idea is to show you what if you would have, I don't know, 10 inputs 8 00:00:33,360 --> 00:00:40,740 and you don't want to have ten different state values and 10 different functions that you're calling 9 00:00:40,980 --> 00:00:42,550 inside of the handler. 10 00:00:43,050 --> 00:00:43,770 Now, first. 11 00:00:44,660 --> 00:00:50,690 We would need to navigate to the address and we're looking for different files in this case, we're 12 00:00:50,690 --> 00:00:55,050 looking for file number two online. 13 00:00:55,910 --> 00:00:57,950 The multiple inputs is the name. 14 00:00:58,370 --> 00:01:06,500 So service and what you'll notice that it is exactly the same, like we finished in the controlled inputs, 15 00:01:06,770 --> 00:01:08,420 and that is by design. 16 00:01:08,750 --> 00:01:14,920 So essentially, I'm not the biggest fan of refactoring, but this is exactly what we'll do in this 17 00:01:14,930 --> 00:01:18,100 video where we will refactor it a little bit. 18 00:01:18,560 --> 00:01:24,320 So our whole setup is going to be exactly the same, where we are still surveying the form, we're still 19 00:01:24,320 --> 00:01:30,680 adding the items and all that good stuff is just the implementation will be a little bit different. 20 00:01:31,010 --> 00:01:35,180 And I would want to start by adding one more input. 21 00:01:35,300 --> 00:01:41,210 And again, when you're looking at this setup, the one that we're about to set up, please keep in 22 00:01:41,210 --> 00:01:49,730 mind that we're talking about the form with multiple, multiple, multiple inputs, not just two or 23 00:01:49,730 --> 00:01:50,030 three. 24 00:01:50,270 --> 00:01:55,350 If you have two or three, probably there's nothing wrong with our previous setup. 25 00:01:55,670 --> 00:01:57,970 So now what I would want is to copy and paste. 26 00:01:57,980 --> 00:02:02,660 So we're adding one more item over here and I'll call this age. 27 00:02:03,050 --> 00:02:04,480 So change this around. 28 00:02:04,850 --> 00:02:07,760 We'll say that HTML four will be for age. 29 00:02:07,760 --> 00:02:09,590 So also, of course, the idea will change. 30 00:02:10,100 --> 00:02:15,770 We're going to add here age value as far as text, let's change the old age. 31 00:02:16,010 --> 00:02:19,950 Now, we also would want to change the name, which, by the way, we haven't used it yet. 32 00:02:20,330 --> 00:02:25,520 So on this video, you'll finally see why we're setting up that name attribute all the time. 33 00:02:25,640 --> 00:02:28,810 And I would want to get a state value. 34 00:02:29,210 --> 00:02:33,170 So for the time being, I will copy and paste. 35 00:02:34,540 --> 00:02:43,320 I'll copy and paste and I'll say page and set a page, and by default, age will be, I don't know, 36 00:02:43,750 --> 00:02:47,450 I think I'm going to go the same way with an empty string. 37 00:02:48,110 --> 00:02:50,080 OK, that is going to be my age. 38 00:02:50,380 --> 00:02:57,820 And of course, in here where I have the value and the change, I would want to change it to age online 39 00:02:58,180 --> 00:02:59,380 chat age. 40 00:02:59,950 --> 00:03:00,990 So this should work. 41 00:03:01,000 --> 00:03:01,540 Correct. 42 00:03:02,110 --> 00:03:10,960 But wouldn't it be better if we would have only one value in a state instead of three or four instead 43 00:03:10,960 --> 00:03:13,420 of 10 or 15 or how many inputs you have? 44 00:03:13,960 --> 00:03:20,200 And also, wouldn't it be better if we would have only one function that is responsible for on change, 45 00:03:20,560 --> 00:03:23,680 regardless which input we're typing in? 46 00:03:24,010 --> 00:03:28,930 Because our if we need to make some changes, we only need to do it in one place. 47 00:03:29,380 --> 00:03:33,550 And we would do that by first setting up one state value. 48 00:03:34,240 --> 00:03:41,610 So instead of first name email and the age, I will go with Consed and I'll call this person, so say 49 00:03:41,620 --> 00:03:42,190 person. 50 00:03:42,490 --> 00:03:47,150 And then of course there's also going to be a set person function. 51 00:03:47,530 --> 00:03:52,540 Now it is going to be equal to a used state and now said this is equal to a object. 52 00:03:52,870 --> 00:04:00,340 So I'm going to go with first name and then that it will be equal to a empty string, an email, same 53 00:04:00,340 --> 00:04:06,630 spiel and the string also the age and you guessed it, empty string. 54 00:04:07,120 --> 00:04:13,540 So one set that up these values now instead of using them one by one, the first name, email and the 55 00:04:13,540 --> 00:04:14,020 age. 56 00:04:14,360 --> 00:04:18,040 Now, I would want to reference the person. 57 00:04:18,520 --> 00:04:25,180 And you're not by the way, I will delete that handle submit and we will rewrite it from the scratch. 58 00:04:25,420 --> 00:04:27,700 So I just delete it so it's not in our way. 59 00:04:27,890 --> 00:04:31,420 And eventually we'll set up one more time. 60 00:04:31,750 --> 00:04:35,650 And of course, I have my person with all those three properties. 61 00:04:36,540 --> 00:04:42,600 And now where we see the input, of course, we would also want to change where now the value will be 62 00:04:42,930 --> 00:04:50,070 person, that person, not just the person who by the way, I think in here, I'm just going to comment 63 00:04:50,070 --> 00:04:51,770 the south or you can delete it. 64 00:04:51,780 --> 00:04:52,690 It's up to you. 65 00:04:53,130 --> 00:05:00,570 So we have a person that first name, one person that email, and then eventually also we have a person 66 00:05:00,570 --> 00:05:01,770 of that age. 67 00:05:02,220 --> 00:05:02,740 Correct. 68 00:05:03,240 --> 00:05:08,060 Now, the gotcha here is that we're still using these functions. 69 00:05:08,190 --> 00:05:08,610 Correct. 70 00:05:08,860 --> 00:05:10,100 So we have some e-mail. 71 00:05:10,110 --> 00:05:12,040 We have said age and all that. 72 00:05:12,300 --> 00:05:19,290 Now, there's a big fat complaint from react because of course, we don't have the handle submit and 73 00:05:19,290 --> 00:05:20,850 also we don't have the functions. 74 00:05:21,180 --> 00:05:23,820 So what I would want to do right now is just delete. 75 00:05:24,090 --> 00:05:26,940 We will flip it over to the submit button. 76 00:05:27,570 --> 00:05:33,170 And as far as the on change ledger, just a reference the function in this case instead. 77 00:05:33,480 --> 00:05:36,450 So go with no and then change. 78 00:05:36,630 --> 00:05:39,530 So that is, of course, the function we haven't created yet. 79 00:05:39,810 --> 00:05:43,280 So I'm going to go with const and then handle change. 80 00:05:43,620 --> 00:05:47,520 And again, I definitely would want that event object. 81 00:05:47,880 --> 00:05:52,740 So I need to set up my parameter and I'll have access to the object. 82 00:05:53,250 --> 00:05:54,570 And like I said. 83 00:05:55,490 --> 00:06:01,550 We'll copy and paste, so changes around there's not going to be three separate functions, there's 84 00:06:01,550 --> 00:06:05,100 going to be one function and again, think 15 inputs. 85 00:06:05,900 --> 00:06:09,390 That is where it definitely makes way more sense. 86 00:06:09,770 --> 00:06:12,260 So we have Hornchurch equal to handle change. 87 00:06:12,560 --> 00:06:18,650 And then on the submit button, well, let's go with UNCLICK just so we can see that, of course, it 88 00:06:18,650 --> 00:06:19,390 is going to work. 89 00:06:19,580 --> 00:06:28,000 And in this case, I'll call this handle subelement, let's scroll up CONSED and then handle. 90 00:06:28,490 --> 00:06:32,480 So right now, still the same setup. 91 00:06:32,480 --> 00:06:39,220 We need to have access to the event object and will right away prevent and default. 92 00:06:39,300 --> 00:06:43,220 OK, so that is the function that we're looking for now. 93 00:06:43,310 --> 00:06:48,050 At this point it's complaining the channel change is not defined. 94 00:06:48,440 --> 00:06:54,200 So of course I call this HANEL and that's not what the function name is. 95 00:06:54,590 --> 00:06:56,870 So let's say now we don't have the arrows. 96 00:06:56,900 --> 00:06:57,480 Beautiful. 97 00:06:57,790 --> 00:06:59,000 Now everything works. 98 00:06:59,000 --> 00:07:00,920 But if you start to try typing. 99 00:07:01,810 --> 00:07:07,140 Of course, again, nothing will work well because the handl change is not doing anything. 100 00:07:07,780 --> 00:07:10,750 Now, why am I showing you this particular setup? 101 00:07:11,200 --> 00:07:19,450 Well, because now I would want to run the channel change regardless of the input, and I would want 102 00:07:19,450 --> 00:07:20,590 to get those values. 103 00:07:20,980 --> 00:07:27,400 And depending on which input I'm changing, I also would want to affect the person. 104 00:07:27,970 --> 00:07:36,970 Now, two properties that I definitely want from the event object are the name and the value. 105 00:07:37,270 --> 00:07:47,830 So if I go here with consed name and equal to event, target and name, copy and paste and if we go 106 00:07:47,830 --> 00:07:49,000 here with a value. 107 00:07:50,120 --> 00:07:57,770 And just around again to even target, so that is the input where we're typing the same how we access 108 00:07:57,770 --> 00:08:01,910 value in my previous case, remember, in the controlled inputs. 109 00:08:03,020 --> 00:08:09,290 We use the value correct when we are setting up the first name or email, we use event target, so that 110 00:08:09,290 --> 00:08:12,660 acts as the input and then we use dot value property. 111 00:08:13,070 --> 00:08:14,930 In this case, I'm looking for two things. 112 00:08:15,350 --> 00:08:23,060 I'm saying whenever I call my handle change, I would want to check for the name of the target and the 113 00:08:23,060 --> 00:08:24,160 name will be right here. 114 00:08:24,170 --> 00:08:29,180 Remember, each and every time we set up that name attribute on the input. 115 00:08:29,600 --> 00:08:34,950 Well, now we'll use it now, say a real target name and then divide. 116 00:08:35,270 --> 00:08:44,370 So if your a log, you'll notice something pretty, pretty cool where we go with name and value and 117 00:08:44,420 --> 00:08:52,460 depending on which input I'm typing n this tells me that the name attribute on the input is first name 118 00:08:52,880 --> 00:08:54,710 and then I'm also getting the values. 119 00:08:55,130 --> 00:09:03,230 Now nothing is displayed right now in the input because we haven't updated the person yet, meaning 120 00:09:03,230 --> 00:09:08,330 we're accessing of course the person that first night and we're not doing anything with that person 121 00:09:08,330 --> 00:09:08,620 yet. 122 00:09:08,900 --> 00:09:10,610 But don't worry, we'll do that in a second. 123 00:09:10,820 --> 00:09:13,340 But if we change to an email, beautiful. 124 00:09:13,340 --> 00:09:19,790 Now n again, it gets me the name of the input and it also gets me that current value. 125 00:09:20,510 --> 00:09:23,610 And the same, of course, is going to be with an H. 126 00:09:24,050 --> 00:09:26,440 Now why is that so cool? 127 00:09:26,840 --> 00:09:32,680 Well, because now once I know the name and the value, I can use the dynamic object properties. 128 00:09:32,960 --> 00:09:35,690 Again, this is coming from JavaScript. 129 00:09:36,110 --> 00:09:44,020 So please either utilize my JavaScript Nugget series or just Google Dynamic Properties, how you would 130 00:09:44,030 --> 00:09:45,950 set them up in Joska. 131 00:09:46,310 --> 00:09:48,110 So now I have the object. 132 00:09:48,410 --> 00:09:49,010 Correct. 133 00:09:49,400 --> 00:09:51,910 And of course the object is that person. 134 00:09:52,250 --> 00:10:00,950 So what I could do here is I could say set person and then remember, I need to copy the old values 135 00:10:00,950 --> 00:10:09,560 first, because since it is an object, it has multiple properties as I'm updating one, for example 136 00:10:09,570 --> 00:10:09,880 name. 137 00:10:10,130 --> 00:10:14,060 I don't want to remove or delete the email. 138 00:10:14,070 --> 00:10:17,150 And that's why we first start by superduper. 139 00:10:18,470 --> 00:10:25,740 That we copy the person from the state and then we add a comma and then after the comma, we would want 140 00:10:25,740 --> 00:10:29,220 to come up with whichever property we would want to update. 141 00:10:29,550 --> 00:10:34,020 Now, of course, that is going to depend on which input we're typing in. 142 00:10:34,140 --> 00:10:34,620 Correct. 143 00:10:34,980 --> 00:10:41,550 And this is the case where we can do this dynamically, where I can say, you know what, get me the 144 00:10:41,550 --> 00:10:45,990 name on that object, because in here I'll pass in the value. 145 00:10:46,410 --> 00:10:48,210 Now, what were my values? 146 00:10:48,240 --> 00:10:52,170 It was either first name, it was either email or it was age. 147 00:10:52,620 --> 00:10:58,670 So now we'll dynamically update this property equal to whatever value we have. 148 00:10:59,040 --> 00:11:06,060 Please keep in mind it's the same thing as you write over here, first name and then it is equal to 149 00:11:06,060 --> 00:11:06,450 a value. 150 00:11:06,720 --> 00:11:11,060 Now the difference is that we are doing this dynamically because we have three inputs. 151 00:11:11,310 --> 00:11:16,440 So if I'll just leave this as a first name, you'll notice that each and every time I type something, 152 00:11:16,860 --> 00:11:20,340 it's actually displayed over here, which kind of doesn't make sense, right? 153 00:11:20,600 --> 00:11:20,960 Why? 154 00:11:21,060 --> 00:11:24,720 Well, because I'm not selling this dynamically. 155 00:11:24,940 --> 00:11:32,910 I'm saying first name where if I have access to the name and of course, those names need to match to 156 00:11:32,910 --> 00:11:41,610 whatever I have in the object now, each and every time I'll type in any of the inputs, I'll dynamically 157 00:11:41,610 --> 00:11:43,340 update that state value as well. 158 00:11:43,680 --> 00:11:45,740 So that's why I need to go with that name. 159 00:11:45,750 --> 00:11:49,180 And that's why we added the name right from the get go. 160 00:11:49,560 --> 00:11:54,420 Now, you're not going to use that all the time, but there's going to be some use cases where it is 161 00:11:54,420 --> 00:12:00,270 very nifty to update whichever state value references the input. 162 00:12:00,600 --> 00:12:03,420 So now, again, let's not get to a bigger screen notice. 163 00:12:03,480 --> 00:12:07,290 I have my state now check it out where I have the name. 164 00:12:07,470 --> 00:12:13,530 I'll start typing and there it is in my state, in the person right away. 165 00:12:13,560 --> 00:12:17,590 I'll access the first name and of course, that it will be equal to Ajan. 166 00:12:17,910 --> 00:12:24,250 Now if I go with email, I go with John at G.M. dot com and there it is. 167 00:12:24,340 --> 00:12:26,140 Now we have John and G.M. outcome. 168 00:12:26,460 --> 00:12:29,720 And lastly, we have age of twenty four. 169 00:12:30,240 --> 00:12:36,390 So notice how nicely we updated all the hours and now what's left to do. 170 00:12:37,250 --> 00:12:46,490 Is again, to submit the form so we prevent a default and now I would want to check if and in this case 171 00:12:46,490 --> 00:12:47,700 I'm checking for three things. 172 00:12:48,080 --> 00:12:53,360 So first name and person, then dot email. 173 00:12:53,870 --> 00:12:56,300 And then the last property, of course, was age. 174 00:12:56,690 --> 00:13:01,160 So I only would want to submit this form if all three of them. 175 00:13:02,180 --> 00:13:09,820 Are more than just an empty string and then let's do the same thing where we are creating a new person, 176 00:13:10,130 --> 00:13:10,610 correct? 177 00:13:10,940 --> 00:13:14,810 So we go here with that new person. 178 00:13:15,090 --> 00:13:21,830 And then as far as the value, I would want to copy the person value from the state of this one, since 179 00:13:21,830 --> 00:13:24,250 this is what we're setting up as far as the input. 180 00:13:24,440 --> 00:13:32,660 And now I also would want to add that ID someone to go with it is equal to a new date and then get time, 181 00:13:33,510 --> 00:13:38,880 get time invoked and then we have to string invoked as well. 182 00:13:39,350 --> 00:13:47,780 And lastly, let's just add person to a set of people and then let's that a person back to an empty 183 00:13:47,780 --> 00:13:48,100 string. 184 00:13:48,440 --> 00:13:50,710 So we go with set people. 185 00:13:51,200 --> 00:13:52,690 That is my array of course. 186 00:13:52,940 --> 00:13:57,050 And like I said previously, we used the function in this case. 187 00:13:57,050 --> 00:14:04,760 I'm just going to pass an era where I'll copy the values from the state and then I'll add that new person. 188 00:14:05,120 --> 00:14:09,890 So we were just practicing in the previous example where we used a function. 189 00:14:10,160 --> 00:14:12,740 We can also pass directly here the value. 190 00:14:13,010 --> 00:14:18,520 And then, like I said, I also want to set person back to empty values. 191 00:14:18,530 --> 00:14:19,970 So we passed in the object. 192 00:14:20,390 --> 00:14:29,810 We say first name is equal to an empty string, then email is empty string and then the age is empty 193 00:14:29,900 --> 00:14:30,240 string. 194 00:14:30,410 --> 00:14:37,490 Now want to set out on a bigger screen where we go with Susan than we're looking for Susan at Gmail 195 00:14:37,490 --> 00:14:41,540 dot com and on the edge will be twenty five. 196 00:14:42,010 --> 00:14:45,490 The moment we have the person there is, there is our Susan. 197 00:14:45,800 --> 00:14:53,000 Now if you want of course you can add also in the just sex that particular age, if that's what you're 198 00:14:53,000 --> 00:14:59,540 shooting for, because we're going to go here with age and in the first name instead of the first name, 199 00:14:59,960 --> 00:15:04,870 we're going to go with paragraph and let's just say age like. 200 00:15:04,880 --> 00:15:10,480 So, um, let's try it out one more time with honor and at Gemelli. 201 00:15:10,500 --> 00:15:13,730 Come on, she's going to be twenty six. 202 00:15:13,730 --> 00:15:19,640 And of course, the moment we add the item, there is this displayed and our list. 203 00:15:20,060 --> 00:15:27,950 So that essentially is how we can set up multiple values with the same handle change function. 204 00:15:28,370 --> 00:15:30,890 Now again, are you going to use that all the time. 205 00:15:30,890 --> 00:15:37,700 No, but there's going to be some use cases where it's just going to be much faster and easier instead 206 00:15:37,700 --> 00:15:44,900 of setting up all these multiple state values and the separate functions that update each and every 207 00:15:44,900 --> 00:15:47,000 time you type in the input. 208 00:15:47,270 --> 00:15:49,370 In this case, we have the same function. 209 00:15:49,610 --> 00:15:55,250 So even if I would have twenty input, if I want to change something around, I just need to do that 210 00:15:55,460 --> 00:15:57,190 in one place.