WEBVTT

0
00:00.120 --> 00:03.930
Alright guys, it's time for yet another challenge.

1
00:03.990 --> 00:08.640
And in this challenge you're going to be applying a lot of things, not just the things that you learnt

2
00:08.640 --> 00:14.790
in the last lesson, but everything up until now. And the end result is going to be this beautiful to-do

3
00:14.790 --> 00:22.020
list where you're going to be able to add some new items say buy milk click add and it gets added to

4
00:22.080 --> 00:27.980
a list of bullet points. And effectively this is what you're aiming for.

5
00:28.140 --> 00:34.650
But in order to achieve this, then you might want to refer to the index.js and look at the challenge

6
00:34.650 --> 00:35.420
text.

7
00:35.430 --> 00:40.560
So the first step is when text is written into this input,

8
00:40.560 --> 00:47.860
the state should somehow be changed so that we can track the state of what's in the input.

9
00:47.860 --> 00:54.810
Next when the Add button gets pressed, whatever is currently inside the input should be saved and added

10
00:54.840 --> 00:57.550
to an array.

11
00:57.580 --> 01:05.870
Now finally, the <ul> or the unordered list here, should display all of the array items as separate

12
01:05.960 --> 01:09.950
list items. And all of these combined together

13
01:09.950 --> 01:14.030
you should end up with this functionality.

14
01:14.030 --> 01:15.530
Go ahead and fork

15
01:15.530 --> 01:18.440
the starting project for this lesson.

16
01:18.500 --> 01:24.270
Look around the app.js and the index.js to see what you've got to work with. And then pause

17
01:24.270 --> 01:29.600
the video and try to complete the challenge. Once you're done, head back over here and I'll walk through

18
01:29.600 --> 01:39.140
the solution with you. Have a go now.

19
01:39.230 --> 01:39.600
All right.

20
01:39.620 --> 01:46.160
So the first thing we're going to tackle is when new text is written into the input, it's state should

21
01:46.160 --> 01:47.060
be saved.

22
01:47.060 --> 01:49.470
So how can we do this?

23
01:49.490 --> 01:51.530
Well we've done this quite a few times.

24
01:51.530 --> 01:57.990
We are going to create a new constant in our app function and we'll give it a name that makes sense.

25
01:58.010 --> 02:04.340
Let's call it the inputText and then maybe we'll have a function to set it called set

26
02:04.340 --> 02:05.600
InputText.

27
02:05.900 --> 02:09.890
And it doesn't matter what you've called yours as long as your code works it's fine.

28
02:10.640 --> 02:18.350
And then we're going to of course invoke useState to be able to change and save the state of the input

29
02:18.350 --> 02:20.570
text when it gets changed.

30
02:20.780 --> 02:27.350
useState of course requires the import up here and then we get to define an initial value which I'll

31
02:27.350 --> 02:31.580
set to just an empty string because the input is blank

32
02:31.580 --> 02:38.710
to begin with. Now let's think about where we would want to use this input text.

33
02:39.520 --> 02:45.220
Well in this, case we actually don't have an element onscreen where we're going to be able to see the

34
02:45.220 --> 02:47.450
state changes for input text.

35
02:47.620 --> 02:57.760
But what we should do though is to add a value property to our inputs and to tie it to this inputText

36
02:57.820 --> 02:58.760
state.

37
02:58.870 --> 03:08.630
So this way we are controlling the inputs and keeping the input value inline with the input text.

38
03:08.680 --> 03:14.710
The next thing to do is, when do we actually want to change the input text, when do we want to call this

39
03:14.710 --> 03:15.780
function?

40
03:15.790 --> 03:19.430
Well it's probably going to be when this input gets changed.

41
03:19.510 --> 03:26.740
So let's add an onChange to this input and get it to call a function which will call handleChange

42
03:27.730 --> 03:33.520
and then let's add this function right here, handleChange, and then we get the event that's going to

43
03:33.520 --> 03:34.330
be passed to it.

44
03:35.680 --> 03:43.660
Now the next thing to do is to create a new constant which is going to keep hold of the new value of

45
03:43.660 --> 03:44.580
the input.

46
03:44.680 --> 03:46.620
So we'll just call it newValue

47
03:46.660 --> 03:51.460
and I'm going to set it to event.target.value.

48
03:51.460 --> 03:54.150
Now notice how in this case we've only got one input.

49
03:54.180 --> 03:59.200
So we don't actually care about the name of the input, so we don't actually need to use destructuring

50
03:59.200 --> 04:00.090
or anything fancy.

51
04:00.100 --> 04:05.230
We just want to get a hold of the value of the target that triggered the event.

52
04:05.230 --> 04:14.020
And once we've gotten that, then we can call setInputText and inside this function, we're going to

53
04:14.110 --> 04:22.060
pass it this new value. And because in this case I'm not actually changing the inputText,

54
04:22.060 --> 04:25.260
I'm not mutating it using setInputText,

55
04:25.390 --> 04:27.420
I don't actually need the previous value.

56
04:27.430 --> 04:28.330
It doesn't really matter.

57
04:28.330 --> 04:33.610
I've got this whole new value that I want to give it which is going to correspond to whatever the user

58
04:33.610 --> 04:36.460
is typing inside this input.

59
04:36.490 --> 04:40.540
So now how can we confirm that this is actually working?

60
04:40.540 --> 04:47.710
Well we can go ahead and pop it out and then use our Chrome developer tools to check the state of our

61
04:47.770 --> 04:48.590
app.

62
04:48.610 --> 04:54.550
So we've currently got one state being tracked and it starts out being equal to an empty string.

63
04:54.550 --> 04:55.930
That sounds about right.

64
04:56.080 --> 05:04.180
And as soon as I start typing, you'll see that the state updates to reflect the latest state.

65
05:04.180 --> 05:09.830
So now that's being kept track of inside this input text.

66
05:09.970 --> 05:17.170
So we've now achieved part 1. Part 2 involves tapping into the moment when the Add button is pressed

67
05:17.650 --> 05:22.420
and then passing the current data in the input to an array.

68
05:22.480 --> 05:24.070
So how can we do that?

69
05:24.250 --> 05:31.600
Well the goal is to keep track of all of the items that the user has added inside an array. So we can create

70
05:31.600 --> 05:38.980
a new constant which is going to hold an array of items. So we can call it items, todo items, whatever it

71
05:38.980 --> 05:40.280
is you want to name it.

72
05:40.450 --> 05:45.040
And then we're going to provide a name for the function which is going to set these items

73
05:45.040 --> 05:47.340
and of course we're going to use state.

74
05:47.440 --> 05:52.840
Now the initial value for items is just going to be an empty array.

75
05:53.140 --> 05:59.250
It's not going to hold anything at all. And this means that when this todo list starts out we won't

76
05:59.250 --> 06:01.440
actually see any bullet points.

77
06:01.440 --> 06:10.020
So if we want to use this array of items to render all of the <li>s to contain the text inside each

78
06:10.080 --> 06:17.250
item, then we would probably have to use what we learned about the map function. So we can tap into our

79
06:17.250 --> 06:25.770
items, call the map function and then inside the map function we can pass it an arrow function and inside

80
06:25.770 --> 06:32.790
this arrow function we'll get access to each item or if you want to make sure that there's enough difference

81
06:32.790 --> 06:38.910
between the array and the individual item, you call it todo item if you want. But effectively just be

82
06:38.910 --> 06:43.920
sure that you know that this is going to be the singular form that comes from mapping through each of

83
06:43.920 --> 06:45.030
the items.

84
06:45.210 --> 06:57.110
And what we're going to return is an <li> which has the to do item as the text in the list item. Now

85
06:57.110 --> 07:02.270
notice how this syntax is not highlighting at all. It's not giving the different colors.

86
07:02.270 --> 07:09.620
And the reason if I hover over it is it says unexpected token. It doesn't recognize this as code.

87
07:09.620 --> 07:16.910
So if we highlight all of this and try to add the left hand curly brace, it'll add the curly braces around

88
07:16.910 --> 07:20.610
this code and it'll get interpreted as Javascript.

89
07:20.640 --> 07:26.960
Now we can of course simplify this down even more because we're only returning a single item so we can

90
07:26.960 --> 07:28.860
get rid of the return keyword,

91
07:28.970 --> 07:40.250
the opening curly brace, the closing semicolon and the closing curly brace to end up with just this. So

92
07:40.310 --> 07:47.750
map through all of the items for each to-do item, create an <li> and put the to-do item in that <li>

93
07:47.930 --> 07:49.620
is what we're telling our code to do.

94
07:50.450 --> 07:56.630
Now all we have to do is call setItems when the Add button gets pressed.

95
07:56.630 --> 08:04.850
Now the Add button is of course this one and we can simply add a onClick to it and get it to trigger

96
08:04.940 --> 08:06.040
a function.

97
08:06.260 --> 08:12.350
You can either get it to trigger an inline function so you could add simply some sort of arrow function

98
08:12.350 --> 08:19.460
here. Alternatively and what I would prefer just in case we need to reuse this functionality, I'm going

99
08:19.460 --> 08:29.970
to call a function code addItem. And then we get to create this addItem function up here and then inside

100
08:29.970 --> 08:38.910
this function we're going to add whatever text is inside our inputs into our items array. Now

101
08:38.910 --> 08:42.680
to do that, we of course have to call setItems.

102
08:42.790 --> 08:44.950
So let's call setItems

103
08:44.950 --> 08:52.870
and inside here we want to get hold of the previous items so that we can simply add the new input at

104
08:52.870 --> 08:55.870
the end of the array as a new item.

105
08:55.870 --> 09:03.220
So to do that, we're going to have to create a new arrow function. Inside the input of this arrow function

106
09:03.220 --> 09:10.030
is going to be the previous items or previous values whatever it is you want to call it.

107
09:10.330 --> 09:16.420
And then what we're going to return is going to be a new array using the spread operator, yeah

108
09:16.570 --> 09:18.390
that's what you learned in the last lesson.

109
09:18.400 --> 09:22.390
You can spread arrays, you can spread objects, you can spread butter.

110
09:22.390 --> 09:24.790
It's really really handy.

111
09:24.790 --> 09:31.510
So let's add our spread operator, add in all of the items from our previous items and then we're going

112
09:31.510 --> 09:37.330
to add the new item which is going to be what's currently inside are inputText.

113
09:38.140 --> 09:44.200
So I'm going to leave my code as it is now and I'm not going to simplify it further by removing the

114
09:44.200 --> 09:49.310
return because I think this reads much better and it's already so short anyways.

115
09:49.390 --> 09:53.740
So now let's go ahead and give our app a spin and see if it works.

116
09:54.280 --> 09:56.560
Let's check our state.

117
09:56.560 --> 09:57.630
We've got two.

118
09:57.640 --> 09:59.780
One is holding a single value,

119
09:59.800 --> 10:02.770
the other is holding an empty array.

120
10:02.800 --> 10:10.630
Let's go ahead and start adding some text, Buy milk. That is being held inside of value which is the input

121
10:10.690 --> 10:11.860
text.

122
10:11.860 --> 10:18.870
And then when I click add, you can see that our array now has a new value. At index 0

123
10:18.880 --> 10:22.530
it's got by milk. And because the array now has a value

124
10:22.540 --> 10:28.990
the state of it has updated which triggered the map function to create a new list item.

125
10:29.140 --> 10:36.400
If we decide to add another item say, buy egg, then our array also gets updated and we now have this beautiful

126
10:36.400 --> 10:44.760
functionality. So the last thing that you might want to do is just to clear the input when you click

127
10:44.790 --> 10:47.780
the Add button ready for the next item.

128
10:47.820 --> 10:55.230
So the place to do that is probably going to be inside addItem so that once you've sent the input text

129
10:55.350 --> 11:04.110
to the items array then after that has completed, you probably want to set the input text to an empty

130
11:04.110 --> 11:13.100
string again. So we can call set input text and pass in an empty string just like that. Now whenever we

131
11:13.100 --> 11:22.390
type in something, buy milk, hit add it gets added and then it gets cleared. Pretty neat right? Now

132
11:22.420 --> 11:24.190
did you manage to complete this challenge?

133
11:24.700 --> 11:31.450
If not, be sure to head back to review your code and once you're happy with how everything is done, then

134
11:31.480 --> 11:38.680
head over to the next lesson and we're going to talk about how to manage a component tree and how to

135
11:38.710 --> 11:42.370
pass state around in our component tree.

136
11:42.370 --> 11:47.530
Notice how at the moment we've only got one app component and that's to try and keep it simple so you

137
11:47.530 --> 11:52.570
can see what's going on because there's enough complex things going on. But in the next lesson we're

138
11:52.570 --> 11:58.900
going to level up even more and we're going to divide up our app into separate components so that we

139
11:58.900 --> 12:05.390
can pass state from child components up to parent components. As you can imagine

140
12:05.500 --> 12:09.700
I'm going to need you to really understand everything that's already been covered so that you'll be

141
12:09.700 --> 12:11.650
comfortable in the next lesson.

142
12:11.740 --> 12:18.670
Take a breather, take a moment to pause, have a think, go for a walk, have some food and once you're ready

143
12:19.150 --> 12:20.290
I'll see you on the next lesson.