WEBVTT 0 00:00.170 --> 00:04.800 Alright guys, it's time again to put your fingers under the keyboard and practice what you have learned 1 00:04.830 --> 00:07.550 in the last lesson. In this lesson 2 00:07.560 --> 00:15.660 I've gone ahead and extracted the part of the app which is this input and this button into a separate 3 00:15.660 --> 00:18.030 component called inputArea. 4 00:18.180 --> 00:22.560 And as you can see all it has is just the input and the button. 5 00:22.560 --> 00:29.640 And I've kept all of the code from your previous edition of the to-do list app but I've not been very 6 00:29.640 --> 00:37.320 helpful in changing anything else. All that the starting code has is an extracted input area and I've 7 00:37.320 --> 00:40.570 inserted that component back in where it used to be. 8 00:40.710 --> 00:46.770 But you'll notice that there's loads and loads of errors. And the code to start off will be very unhappy 9 00:46.770 --> 00:51.490 with you and your job is to make the compiler happy. 10 00:51.750 --> 00:57.230 Or more specifically, the idea is to make the app work as it did before, 11 00:57.240 --> 01:00.020 so being able to add new components. 12 01:00.150 --> 01:05.950 But in this case of course this entire section is now a separate component. 13 01:06.060 --> 01:13.140 So you'll have to think about how you're going to manage this component tree because we've now got a 14 01:13.290 --> 01:20.310 app component which renders a inputArea and lots of ToDoItem components. 15 01:20.370 --> 01:26.100 So have a think about what you learned in the last lesson and see if you can complete this challenge 16 01:26.490 --> 01:30.810 and make the errors go away and make the app work as it did before. 17 01:31.190 --> 01:33.230 Pause the video now and try to give that a go. 18 01:33.810 --> 01:39.910 And then once you're done come back a walk through the solution with you. 19 01:40.130 --> 01:40.480 All right. 20 01:40.510 --> 01:47.950 So the first thing we need to address is inside our inputArea we've got an onChange which detects 21 01:48.010 --> 01:50.710 when the input actually updates. 22 01:50.710 --> 01:56.890 So this is something that probably should be managed inside this component. 23 01:56.890 --> 02:03.670 We could keep that local because nobody else really cares until the moment when the button gets clicked 24 02:03.670 --> 02:10.150 and then we'd probably want to pass whatever is in the input to this items array. 25 02:10.300 --> 02:18.190 So firstly I'm going to move this handleChange function into the input area to save myself and maybe 26 02:18.190 --> 02:20.620 yourself some work. 27 02:20.620 --> 02:27.640 Now what it's doing is it's going to handle the change when this input updates and it's going to get 28 02:27.640 --> 02:32.600 hold of the new value from the event target which is this input. 29 02:32.890 --> 02:41.280 Next it calls setInputText with that new value so we can go ahead and port this part over as well. 30 02:41.290 --> 02:48.010 So now this inputArea is going to keep track of the state of the inputText which it holds and we are 31 02:48.010 --> 02:51.400 able to set it using this function. 32 02:51.400 --> 02:57.250 Now if you have done what I've just done and you get errors, then if you hover over it you'll see that 33 02:57.250 --> 02:59.800 it says useState is not defined. 34 02:59.800 --> 03:06.460 Remember that when we manually type out useState, code sandbox is helpful enough to automatically insert 35 03:06.460 --> 03:07.790 the import for us. 36 03:08.020 --> 03:11.020 But if we just copy it over, then we don't get that benefit. 37 03:11.050 --> 03:15.150 So let's make that error disappear by importing useState. 38 03:15.190 --> 03:21.760 Now this part of the code is now pretty happy and the only thing that is still screaming at us is this 39 03:21.820 --> 03:26.880 button, because when it gets clicked we want to be able to add the item 40 03:26.920 --> 03:35.440 so the current value of input text, into this items array. But addItem is a function that lives in our 41 03:35.620 --> 03:42.610 app component and it doesn't actually make sense to move it to our inputArea because this items array 42 03:43.030 --> 03:51.910 actually needs to be accessed by a lot of components in our tree including our ToDoItems and our input 43 03:51.910 --> 03:52.330 Area. 44 03:52.570 --> 03:57.010 So it makes sense to keep it at the top level in our app component. 45 03:57.190 --> 04:04.450 All we need to do is some sort of way of calling this addItem function and having some sort of way 46 04:04.450 --> 04:12.880 of being able to pass over the inputText that it could add to all of the previous items in our items 47 04:12.910 --> 04:19.480 array. So how can we trigger this function from within this child component? 48 04:19.490 --> 04:26.690 Well it's going to be a case of using props of course to pass over this addItem function. 49 04:26.780 --> 04:33.740 So when we call inputArea and we render it, we're going to pass over the prop which you can call anything 50 04:33.740 --> 04:43.040 you want, but I'm going to call onAdd and I'm going to pass over this addItem function as the value 51 04:43.040 --> 04:44.270 of this prop. 52 04:44.330 --> 04:55.820 So now inside my inputArea, I can now pick up on the props which is going to be props.onAdd. And 53 04:56.240 --> 05:03.590 a good idea if you get confused by all of these props that's happening, is to actually go into the components 54 05:03.680 --> 05:11.900 check the inputArea and see the props here. And you can see that we can access the addItem function 55 05:11.990 --> 05:14.390 through the onAdd property, 56 05:14.810 --> 05:17.220 so props.onAdd. 57 05:17.300 --> 05:24.950 So now when this button gets clicked, it's going to call whatever is stored inside this onAdd prop 58 05:24.950 --> 05:33.980 and that is of course the addItem function that lives inside our App.jsx right here. And then 59 05:34.040 --> 05:40.150 we're going to want to pass over some inputText to put into our array of items. 60 05:40.220 --> 05:41.950 So how do we do that? 61 05:41.960 --> 05:49.430 Well we can achieve that by instead of just calling this add function, actually passing in a function. 62 05:50.510 --> 06:00.410 And inside this function, we can again tap into props.onAdd and then in the value of the current 63 06:00.500 --> 06:02.130 inputText. 64 06:02.600 --> 06:11.380 Like so. Now what will happen is when the button gets clicked, it's going to trigger this function 65 06:11.660 --> 06:19.280 and when it does it's going to call the onAdd function which remember is tied to the addItem. 66 06:19.280 --> 06:28.680 It's going to call onAdd and pass in the inputText that lives inside this component. And that input 67 06:28.680 --> 06:34.620 text is of course whatever the user has currently typed into the input. 68 06:34.620 --> 06:42.420 Now we're able to catch whatever is passed over inside here and add it into our items array as we did 69 06:42.420 --> 06:43.760 before. 70 06:43.830 --> 06:49.410 Now the final thing that we wanted to do was to be able to reset the input text. 71 06:49.410 --> 06:52.170 So this is no longer the place we're going to do it. 72 06:52.260 --> 06:59.970 Instead we're going to call it inside onClick which gets triggered when the button gets pressed. 73 06:59.970 --> 07:07.440 So inside here after we've called the onAdd, passing over the input text, we can now call set inputText 74 07:07.860 --> 07:14.550 and set it back to an empty string because we're already done with it and we've already passed it over. 75 07:14.580 --> 07:18.540 Now let's go ahead and refresh our app and test it out. 76 07:18.540 --> 07:26.250 So let's try and typing buy milk into our input area and notice how the state has now updated. 77 07:26.250 --> 07:34.110 So this is the state of that input text which hopefully when we click Add is going to call add item and 78 07:34.110 --> 07:37.020 pass it over to our app component. 79 07:37.020 --> 07:42.840 So now we've got an app component and input area and our first to do item. 80 07:42.840 --> 07:51.600 So this is our very basic component tree and we were able to use these callbacks to pass something that 81 07:51.600 --> 07:58.830 has state in the input area back up to the app component and that data then gets populated down to the 82 07:58.830 --> 08:01.230 to do item. 83 08:01.350 --> 08:08.490 So did you manage to complete this challenge? Again if it's confusing at all, then be sure to just repeat 84 08:08.490 --> 08:16.210 it a couple of times until it gets familiar and until it makes sense. But in the next lesson we're going 85 08:16.210 --> 08:22.960 to be finally ready to put together all of these things that we've learned and build out the third iteration 86 08:23.140 --> 08:24.160 of our keeper app. 87 08:24.430 --> 08:27.340 So for all of that and more, I'll see you there.