0
1
00:00:00,170 --> 00:00:04,800
Alright guys, it's time again to put your fingers under the keyboard and practice what you have learned
1

2
00:00:04,830 --> 00:00:07,550
in the last lesson. In this lesson
2

3
00:00:07,560 --> 00: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

4
00:00:15,660 --> 00:00:18,030
component called inputArea.
4

5
00:00:18,180 --> 00:00:22,560
And as you can see all it has is just the input and the button.
5

6
00:00:22,560 --> 00: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

7
00:00:29,640 --> 00:00:37,320
helpful in changing anything else. All that the starting code has is an extracted input area and I've
7

8
00:00:37,320 --> 00:00:40,570
inserted that component back in where it used to be.
8

9
00:00:40,710 --> 00: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

10
00:00:46,770 --> 00:00:51,490
with you and your job is to make the compiler happy.
10

11
00:00:51,750 --> 00:00:57,230
Or more specifically, the idea is to make the app work as it did before,
11

12
00:00:57,240 --> 00:01:00,020
so being able to add new components.
12

13
00:01:00,150 --> 00:01:05,950
But in this case of course this entire section is now a separate component.
13

14
00:01:06,060 --> 00: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

15
00:01:13,290 --> 00:01:20,310
app component which renders a inputArea and lots of ToDoItem components.
15

16
00:01:20,370 --> 00:01:26,100
So have a think about what you learned in the last lesson and see if you can complete this challenge
16

17
00:01:26,490 --> 00:01:30,810
and make the errors go away and make the app work as it did before.
17

18
00:01:31,190 --> 00:01:33,230
Pause the video now and try to give that a go.
18

19
00:01:33,810 --> 00:01:39,910
And then once you're done come back a walk through the solution with you.
19

20
00:01:40,130 --> 00:01:40,480
All right.
20

21
00:01:40,510 --> 00:01:47,950
So the first thing we need to address is inside our inputArea we've got an onChange which detects
21

22
00:01:48,010 --> 00:01:50,710
when the input actually updates.
22

23
00:01:50,710 --> 00:01:56,890
So this is something that probably should be managed inside this component.
23

24
00:01:56,890 --> 00:02:03,670
We could keep that local because nobody else really cares until the moment when the button gets clicked
24

25
00:02:03,670 --> 00:02:10,150
and then we'd probably want to pass whatever is in the input to this items array.
25

26
00:02:10,300 --> 00:02:18,190
So firstly I'm going to move this handleChange function into the input area to save myself and maybe
26

27
00:02:18,190 --> 00:02:20,620
yourself some work.
27

28
00:02:20,620 --> 00: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

29
00:02:27,640 --> 00:02:32,600
hold of the new value from the event target which is this input.
29

30
00:02:32,890 --> 00:02:41,280
Next it calls setInputText with that new value so we can go ahead and port this part over as well.
30

31
00:02:41,290 --> 00: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

32
00:02:48,010 --> 00:02:51,400
able to set it using this function.
32

33
00:02:51,400 --> 00: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

34
00:02:57,250 --> 00:02:59,800
it says useState is not defined.
34

35
00:02:59,800 --> 00:03:06,460
Remember that when we manually type out useState, code sandbox is helpful enough to automatically insert
35

36
00:03:06,460 --> 00:03:07,790
the import for us.
36

37
00:03:08,020 --> 00:03:11,020
But if we just copy it over, then we don't get that benefit.
37

38
00:03:11,050 --> 00:03:15,150
So let's make that error disappear by importing useState.
38

39
00:03:15,190 --> 00: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

40
00:03:21,820 --> 00:03:26,880
button, because when it gets clicked we want to be able to add the item
40

41
00:03:26,920 --> 00:03:35,440
so the current value of input text, into this items array. But addItem is a function that lives in our
41

42
00:03:35,620 --> 00:03:42,610
app component and it doesn't actually make sense to move it to our inputArea because this items array
42

43
00:03:43,030 --> 00:03:51,910
actually needs to be accessed by a lot of components in our tree including our ToDoItems and our input
43

44
00:03:51,910 --> 00:03:52,330
Area.
44

45
00:03:52,570 --> 00:03:57,010
So it makes sense to keep it at the top level in our app component.
45

46
00:03:57,190 --> 00: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

47
00:04:04,450 --> 00: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

48
00:04:12,910 --> 00:04:19,480
array. So how can we trigger this function from within this child component?
48

49
00:04:19,490 --> 00:04:26,690
Well it's going to be a case of using props of course to pass over this addItem function.
49

50
00:04:26,780 --> 00: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

51
00:04:33,740 --> 00: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

52
00:04:43,040 --> 00:04:44,270
of this prop.
52

53
00:04:44,330 --> 00: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

54
00:04:56,240 --> 00: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

55
00:05:03,680 --> 00:05:11,900
check the inputArea and see the props here. And you can see that we can access the addItem function
55

56
00:05:11,990 --> 00:05:14,390
through the onAdd property,
56

57
00:05:14,810 --> 00:05:17,220
so props.onAdd.
57

58
00:05:17,300 --> 00:05:24,950
So now when this button gets clicked, it's going to call whatever is stored inside this onAdd prop
58

59
00:05:24,950 --> 00:05:33,980
and that is of course the addItem function that lives inside our App.jsx right here. And then
59

60
00:05:34,040 --> 00:05:40,150
we're going to want to pass over some inputText to put into our array of items.
60

61
00:05:40,220 --> 00:05:41,950
So how do we do that?
61

62
00:05:41,960 --> 00:05:49,430
Well we can achieve that by instead of just calling this add function, actually passing in a function.
62

63
00:05:50,510 --> 00:06:00,410
And inside this function, we can again tap into props.onAdd and then in the value of the current
63

64
00:06:00,500 --> 00:06:02,130
inputText.
64

65
00:06:02,600 --> 00:06:11,380
Like so. Now what will happen is when the button gets clicked, it's going to trigger this function
65

66
00:06:11,660 --> 00:06:19,280
and when it does it's going to call the onAdd function which remember is tied to the addItem.
66

67
00:06:19,280 --> 00:06:28,680
It's going to call onAdd and pass in the inputText that lives inside this component. And that input
67

68
00:06:28,680 --> 00:06:34,620
text is of course whatever the user has currently typed into the input.
68

69
00:06:34,620 --> 00: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

70
00:06:42,420 --> 00:06:43,760
before.
70

71
00:06:43,830 --> 00:06:49,410
Now the final thing that we wanted to do was to be able to reset the input text.
71

72
00:06:49,410 --> 00:06:52,170
So this is no longer the place we're going to do it.
72

73
00:06:52,260 --> 00:06:59,970
Instead we're going to call it inside onClick which gets triggered when the button gets pressed.
73

74
00:06:59,970 --> 00:07:07,440
So inside here after we've called the onAdd, passing over the input text, we can now call set inputText
74

75
00:07:07,860 --> 00: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

76
00:07:14,580 --> 00:07:18,540
Now let's go ahead and refresh our app and test it out.
76

77
00:07:18,540 --> 00:07:26,250
So let's try and typing buy milk into our input area and notice how the state has now updated.
77

78
00:07:26,250 --> 00: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

79
00:07:34,110 --> 00:07:37,020
pass it over to our app component.
79

80
00:07:37,020 --> 00:07:42,840
So now we've got an app component and input area and our first to do item.
80

81
00:07:42,840 --> 00:07:51,600
So this is our very basic component tree and we were able to use these callbacks to pass something that
81

82
00:07:51,600 --> 00: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

83
00:07:58,830 --> 00:08:01,230
to do item.
83

84
00:08:01,350 --> 00: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

85
00:08:08,490 --> 00: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

86
00:08:16,210 --> 00: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

87
00:08:23,140 --> 00:08:24,160
of our keeper app.
87

88
00:08:24,430 --> 00:08:27,340
So for all of that and more, I'll see you there.