Alright guys, it's time again to put your fingers under the keyboard and practice what you have learned 1
in the last lesson. In this lesson 2
I've gone ahead and extracted the part of the app which is this input and this button into a separate 3
component called inputArea. 4
And as you can see all it has is just the input and the button. 5
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
helpful in changing anything else. All that the starting code has is an extracted input area and I've 7
inserted that component back in where it used to be. 8
But you'll notice that there's loads and loads of errors. And the code to start off will be very unhappy 9
with you and your job is to make the compiler happy. 10
Or more specifically, the idea is to make the app work as it did before, 11
so being able to add new components. 12
But in this case of course this entire section is now a separate component. 13
So you'll have to think about how you're going to manage this component tree because we've now got a 14
app component which renders a inputArea and lots of ToDoItem components. 15
So have a think about what you learned in the last lesson and see if you can complete this challenge 16
and make the errors go away and make the app work as it did before. 17
Pause the video now and try to give that a go. 18
And then once you're done come back a walk through the solution with you. 19
All right. 20
So the first thing we need to address is inside our inputArea we've got an onChange which detects 21
when the input actually updates. 22
So this is something that probably should be managed inside this component. 23
We could keep that local because nobody else really cares until the moment when the button gets clicked 24
and then we'd probably want to pass whatever is in the input to this items array. 25
So firstly I'm going to move this handleChange function into the input area to save myself and maybe 26
yourself some work. 27
Now what it's doing is it's going to handle the change when this input updates and it's going to get 28
hold of the new value from the event target which is this input. 29
Next it calls setInputText with that new value so we can go ahead and port this part over as well. 30
So now this inputArea is going to keep track of the state of the inputText which it holds and we are 31
able to set it using this function. 32
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
it says useState is not defined. 34
Remember that when we manually type out useState, code sandbox is helpful enough to automatically insert 35
the import for us. 36
But if we just copy it over, then we don't get that benefit. 37
So let's make that error disappear by importing useState. 38
Now this part of the code is now pretty happy and the only thing that is still screaming at us is this 39
button, because when it gets clicked we want to be able to add the item 40
so the current value of input text, into this items array. But addItem is a function that lives in our 41
app component and it doesn't actually make sense to move it to our inputArea because this items array 42
actually needs to be accessed by a lot of components in our tree including our ToDoItems and our input 43
Area. 44
So it makes sense to keep it at the top level in our app component. 45
All we need to do is some sort of way of calling this addItem function and having some sort of way 46
of being able to pass over the inputText that it could add to all of the previous items in our items 47
array. So how can we trigger this function from within this child component? 48
Well it's going to be a case of using props of course to pass over this addItem function. 49
So when we call inputArea and we render it, we're going to pass over the prop which you can call anything 50
you want, but I'm going to call onAdd and I'm going to pass over this addItem function as the value 51
of this prop. 52
So now inside my inputArea, I can now pick up on the props which is going to be props.onAdd. And 53
a good idea if you get confused by all of these props that's happening, is to actually go into the components 54
check the inputArea and see the props here. And you can see that we can access the addItem function 55
through the onAdd property, 56
so props.onAdd. 57
So now when this button gets clicked, it's going to call whatever is stored inside this onAdd prop 58
and that is of course the addItem function that lives inside our App.jsx right here. And then 59
we're going to want to pass over some inputText to put into our array of items. 60
So how do we do that? 61
Well we can achieve that by instead of just calling this add function, actually passing in a function. 62
And inside this function, we can again tap into props.onAdd and then in the value of the current 63
inputText. 64
Like so. Now what will happen is when the button gets clicked, it's going to trigger this function 65
and when it does it's going to call the onAdd function which remember is tied to the addItem. 66
It's going to call onAdd and pass in the inputText that lives inside this component. And that input 67
text is of course whatever the user has currently typed into the input. 68
Now we're able to catch whatever is passed over inside here and add it into our items array as we did 69
before. 70
Now the final thing that we wanted to do was to be able to reset the input text. 71
So this is no longer the place we're going to do it. 72
Instead we're going to call it inside onClick which gets triggered when the button gets pressed. 73
So inside here after we've called the onAdd, passing over the input text, we can now call set inputText 74
and set it back to an empty string because we're already done with it and we've already passed it over. 75
Now let's go ahead and refresh our app and test it out. 76
So let's try and typing buy milk into our input area and notice how the state has now updated. 77
So this is the state of that input text which hopefully when we click Add is going to call add item and 78
pass it over to our app component. 79
So now we've got an app component and input area and our first to do item. 80
So this is our very basic component tree and we were able to use these callbacks to pass something that 81
has state in the input area back up to the app component and that data then gets populated down to the 82
to do item. 83
So did you manage to complete this challenge? Again if it's confusing at all, then be sure to just repeat 84
it a couple of times until it gets familiar and until it makes sense. But in the next lesson we're going 85
to be finally ready to put together all of these things that we've learned and build out the third iteration 86
of our keeper app. 87
So for all of that and more, I'll see you there.