0
1
00:00:00,300 --> 00:00:08,160
Alright guys it's time to apply everything that we've learned so far to our keeper app project and
1

2
00:00:08,220 --> 00:00:11,080
make it actually have some functionality.
2

3
00:00:11,310 --> 00:00:17,260
If you head over to the course resources and fork your own copy of the keeper part 3
3

4
00:00:17,400 --> 00:00:23,910
starting project, you'll notice that the challenge instructions are very simple.
4

5
00:00:23,910 --> 00:00:29,750
All we want to do is to be able to add notes and delete notes from our keeper app.
5

6
00:00:29,760 --> 00:00:36,550
This is the final functionality that you're looking for. When we add a note with a new title
6

7
00:00:36,780 --> 00:00:46,890
and when we click the Add button it clears those inputs and pushes a new note into our array of notes.
7

8
00:00:46,890 --> 00:00:55,020
So if we added another, then you can see they will just keep getting added alongside each other.
8

9
00:00:55,050 --> 00:01:02,310
The second part of the challenge is to be able to click on the delete button and for that note to be
9

10
00:01:02,370 --> 00:01:05,590
removed from the stack of notes here.
10

11
00:01:05,610 --> 00:01:11,700
Now even though it sounds simple, there's only two steps each of these steps will involve quite a few
11

12
00:01:11,700 --> 00:01:14,570
things that you've learned along the way.
12

13
00:01:14,760 --> 00:01:20,430
If you want to get started with the challenge and you think you can tackle it already, then go ahead
13

14
00:01:20,430 --> 00:01:22,590
and pause the video and give it a go
14

15
00:01:22,590 --> 00:01:28,710
now. If you want to watch him break down the challenge into smaller pieces so that you can tackle it
15

16
00:01:28,740 --> 00:01:36,630
one by one which is obviously a lot easier, then feel free to continue listening.
16

17
00:01:36,830 --> 00:01:37,140
All right.
17

18
00:01:37,170 --> 00:01:44,220
So the first part of implementing the add Note functionality is probably going to involve some sort of
18

19
00:01:44,280 --> 00:01:45,880
state management right?
19

20
00:01:45,930 --> 00:01:55,650
We're probably going to have to create a constant that keeps track of the title and content.
20

21
00:01:55,650 --> 00:02:03,240
In addition, when the new note whether it's title or content gets created, we're probably going to want to
21

22
00:02:03,330 --> 00:02:12,810
pass the new note back to the app component. Ad then maybe in the app component we'll have some sort
22

23
00:02:12,810 --> 00:02:22,140
of array right? Which we can add the new note to an array and this array is probably going to be something
23

24
00:02:22,140 --> 00:02:33,010
with states which you can set state and you can read it. And then we can take that array and render a
24

25
00:02:33,210 --> 00:02:40,440
separate Note components for each item in the array.
25

26
00:02:41,180 --> 00:02:47,330
And these sub steps should together create the implement add Note functionality.
26

27
00:02:47,330 --> 00:02:55,190
Now the second step where we want to delete notes, we're probably going to need some sort of way of getting
27

28
00:02:55,250 --> 00:03:07,670
a callback from the Note component that's going to trigger a delete function. The delete function is
28

29
00:03:07,670 --> 00:03:11,060
probably going to live in the App.jsx.
29

30
00:03:11,400 --> 00:03:21,470
And in this case, we're probably going to want to use the filter function to filter out the item that
30

31
00:03:21,770 --> 00:03:25,600
needs deletion.
31

32
00:03:25,650 --> 00:03:34,530
So you're going to have to think about how to pass an id over to the Note component so that when you
32

33
00:03:34,530 --> 00:03:43,380
trigger the delete function, you can pass it back to the app component in order to identify the Note 
33

34
00:03:43,440 --> 00:03:47,140
that needs to be removed from the array.
34

35
00:03:47,190 --> 00:03:55,050
So this is the broken down version of the challenge and I recommend giving it a go and seeing how you
35

36
00:03:55,050 --> 00:03:57,120
get on. If you get stuck
36

37
00:03:57,150 --> 00:04:04,170
then come back and watch me go through the solution step by step and then maybe that'll help you get
37

38
00:04:04,200 --> 00:04:09,670
unstuck and you can continue with the rest of the steps of the challenge.
38

39
00:04:09,690 --> 00:04:10,000
All right.
39

40
00:04:10,020 --> 00:04:13,140
So pause the video now and try to complete this challenge.
40

41
00:04:17,920 --> 00:04:18,380
All right.
41

42
00:04:18,410 --> 00:04:24,530
The first thing we're going to address is implementing the add note functionality and the sub
42

43
00:04:24,530 --> 00:04:31,160
step of this was to create a constant that keeps track of the title and the content so that we can save
43

44
00:04:31,220 --> 00:04:33,840
what is typed into these two inputs.
44

45
00:04:34,280 --> 00:04:39,860
So I'm going to open up my components folder and go to this CreateArea component.
45

46
00:04:39,860 --> 00:04:49,490
Now here you'll notice that there is a very simple form with an input, a text area which acts pretty
46

47
00:04:49,490 --> 00:04:51,220
much like an input,
47

48
00:04:51,350 --> 00:04:55,710
and finally a button that just reads add.
48

49
00:04:55,730 --> 00:05:02,060
So we've only got three components and we want to be able to save what's typed into this input under
49

50
00:05:02,060 --> 00:05:03,920
something called title
50

51
00:05:03,920 --> 00:05:06,880
and this one under something called content.
51

52
00:05:06,950 --> 00:05:15,980
Let's go ahead and create our stateful constants and I'm going to create a object in this case that
52

53
00:05:15,980 --> 00:05:18,880
contains both the title and the content.
53

54
00:05:19,040 --> 00:05:24,290
You could of course create separate constants, one for the title and one for the content,
54

55
00:05:24,440 --> 00:05:29,210
but it means you'll have to write more lines of code and do a little bit more work.
55

56
00:05:29,240 --> 00:05:34,790
I'm going to create a constant called note and I'll create a function called setNote which is going to
56

57
00:05:34,870 --> 00:05:35,780
update it.
57

58
00:05:36,080 --> 00:05:43,490
And I'm of course going to need to use state. The initial state is just going to be an object with a
58

59
00:05:43,490 --> 00:05:50,750
title key that's set to an empty string and a content key that's also set to an empty string.
59

60
00:05:50,750 --> 00:05:56,460
Now I can use this note inside my input and my text area.
60

61
00:05:56,690 --> 00:06:07,850
So I'm going to have two values and this one is going to be equal to note.title and this one will
61

62
00:06:07,850 --> 00:06:15,050
be note.content. Now that we've got our inputs controlled,
62

63
00:06:15,050 --> 00:06:19,880
the next step is to update them when they get changed.
63

64
00:06:20,000 --> 00:06:29,490
So inside the input and the textarea I'm going to add a onChange. And inside both of these onChange
64

65
00:06:29,570 --> 00:06:40,220
I'm going to call a function which I'll call handleChange. And then we can pass it in as the onChange
65

66
00:06:40,310 --> 00:06:42,970
for both of these like
66

67
00:06:42,980 --> 00:06:49,310
so. Now handleChange is going to receive an event when it gets triggered
67

68
00:06:49,310 --> 00:06:57,590
and in this case we're going to destructure the event so that we get hold of the event.target.
68

69
00:06:57,590 --> 00:06:59,260
name and .value.
69

70
00:06:59,570 --> 00:07:08,930
So we're going to create a new destructured object using the const keyword and this destructured object
70

71
00:07:08,960 --> 00:07:16,890
is going to tap into the event.target.name and event dot tevent.target.value like so.
71

72
00:07:16,900 --> 00:07:26,750
So now we can use this name and value as separate constants and I'm going to add to my note by calling
72

73
00:07:26,780 --> 00:07:35,900
setNote. Now setNote is going to be able to receive the previous note and I'm going to use that to
73

74
00:07:35,960 --> 00:07:38,290
add to the existing note.
74

75
00:07:38,780 --> 00:07:45,980
So in my setote I'm going to return a new object with the previous note
75

76
00:07:46,430 --> 00:07:56,190
and in addition I'm going to add the new name and value. And remember that this syntax simply turns this
76

77
00:07:56,250 --> 00:08:05,040
name key from just the string name for the key to the actual value of this name constant.
77

78
00:08:05,220 --> 00:08:11,760
And this is of course the spread operator which is going to spread all of the key value pairs that is
78

79
00:08:11,760 --> 00:08:14,200
currently in existence in our note.
79

80
00:08:14,670 --> 00:08:21,550
And it's going to add it to this final object. This way when we start typing
80

81
00:08:21,660 --> 00:08:26,220
then you'll see it being saved inside our state.
81

82
00:08:26,220 --> 00:08:31,740
So if I go ahead and click on my create area, extend my state object,
82

83
00:08:31,740 --> 00:08:37,670
this is a title and this is the content.
83

84
00:08:37,710 --> 00:08:43,410
So if you're not seeing this then there might be something that you're missing in your code.
84

85
00:08:43,410 --> 00:08:46,740
So this is the first step.
85

86
00:08:46,860 --> 00:08:54,370
We've created a constant that keeps track of the title and the content. The next step is to somehow pass
86

87
00:08:54,400 --> 00:09:03,130
this newly created note back to the app. So we know that we've got this note saved in this constant and
87

88
00:09:03,250 --> 00:09:10,210
we know that we have a button called add which is supposed to trigger this adding of the note functionality.
88

89
00:09:10,870 --> 00:09:18,520
So why don't we go ahead and add a onClick to this button and try to get this note that's been created
89

90
00:09:18,520 --> 00:09:22,430
here passed back to the App.jsx?
90

91
00:09:22,510 --> 00:09:29,620
So when this button gets clicked, we're going to pass it a function that should be triggered.
91

92
00:09:29,650 --> 00:09:37,120
So in this case I'm just going to call that function submitNote and this submitNote is going to be
92

93
00:09:37,120 --> 00:09:40,040
triggered here.
93

94
00:09:40,110 --> 00:09:45,340
Now remember what we said about forms and buttons inside forms.
94

95
00:09:45,540 --> 00:09:53,010
Whenever you click on a button inside a form, the default behavior is to refresh the page. And you can
95

96
00:09:53,010 --> 00:10:01,550
see that if I type something in here and I click add, you can see the entire screen flashes and refreshes.
96

97
00:10:01,560 --> 00:10:10,050
So the first thing we need to do is to prevent this. So we can pass the event to this submitNote and
97

98
00:10:10,050 --> 00:10:19,710
the event is triggered by the onClick and we can call event.preventDefault.
98

99
00:10:20,050 --> 00:10:28,390
This way you'll notice if I go back over here and I type something in here and I click Add, notice how
99

100
00:10:28,390 --> 00:10:35,680
the screen is not flashing anymore. So I'm preventing this entire reloading of the page by using the
100

101
00:10:35,680 --> 00:10:39,880
event.preventDefault which we saw in previous lessons.
101

102
00:10:39,880 --> 00:10:47,350
The next thing to do is to somehow trigger a function that can pass this note back over to the App,
102

103
00:10:47,350 --> 00:10:49,750
jsx. And to do that
103

104
00:10:49,840 --> 00:10:54,220
we of course have to pass in a function as a prop.
104

105
00:10:54,490 --> 00:11:02,830
So let's go ahead and create a function called addNote and this addNote is going to receive a note
105

106
00:11:02,890 --> 00:11:06,970
object and it's going to do something with that note object.
106

107
00:11:06,970 --> 00:11:14,140
So that addNote is going to be added as a value to one of the props for the create area and you can
107

108
00:11:14,140 --> 00:11:22,630
call it anything you want but I'm going to call it onAdd and I'm going to set it equal addNote .
108

109
00:11:22,630 --> 00:11:30,640
So now if we take a look at our components when we head over to create area it gets a prop under the
109

110
00:11:30,700 --> 00:11:38,090
property name of onAdd and that is going to be equal to the addNote that comes from the App.
110

111
00:11:38,120 --> 00:11:38,970
js.
111

112
00:11:39,070 --> 00:11:49,420
Now we are going to trigger this addNote by getting hold of the props that gets passed over and especially
112

113
00:11:49,540 --> 00:11:58,570
the props.onAdd. And calling this onAdd from the props is going to be equivalent to calling the
113

114
00:11:58,660 --> 00:12:05,560
addNote from the App.jsx. And in order for us to be able to add the note we have to pass it back
114

115
00:12:05,620 --> 00:12:06,710
as an input.
115

116
00:12:06,790 --> 00:12:16,180
So in the onAdd we're going to pass over the current created note, like so. Now we're pretty much done
116

117
00:12:16,240 --> 00:12:21,650
with our second step which is passing the new note back to the app.
117

118
00:12:21,880 --> 00:12:29,200
And if you go into this addNote and go ahead and try to log the note just to check that it works, then
118

119
00:12:29,260 --> 00:12:35,260
you can see that if I go ahead and just type some gibberish in here and click add and I look in
119

120
00:12:35,260 --> 00:12:41,770
my console, then you can see that the only place where I'm logging it is inside my app component inside
120

121
00:12:41,770 --> 00:12:47,610
the addNote function and I'm now able to receive this note and be able to log it right here.
121

122
00:12:48,130 --> 00:12:50,550
So all is good in the world.
122

123
00:12:50,620 --> 00:12:55,970
The next sub step is to add this new note to an array.
123

124
00:12:56,020 --> 00:13:03,760
This is going to happen in our App.jsx and that array is going to need state because it's going
124

125
00:13:03,760 --> 00:13:04,890
to be changed.
125

126
00:13:05,020 --> 00:13:13,120
Let's create a constant and I'm going to call it notes to represent the plural nature of our array of
126

127
00:13:13,120 --> 00:13:18,940
notes. And then I'm going to create a function called setNotes which is going to help me update this
127

128
00:13:18,940 --> 00:13:20,620
notes array.
128

129
00:13:20,890 --> 00:13:27,850
Then we of course have to use state and import state and the initial value for my notes is just going
129

130
00:13:27,850 --> 00:13:33,880
to be an empty array. Instead of having this sort of sample note up here,
130

131
00:13:33,910 --> 00:13:41,280
I'm just going to start it out with no notes and only when the user actually adds one does it get populated.
131

132
00:13:41,670 --> 00:13:47,940
Now that we have this notes array and we're receiving the new notes via this function, then we can think
132

133
00:13:47,940 --> 00:13:55,770
about how we can add to this notes array. So we can probably use these setNotes function and inside
133

134
00:13:55,770 --> 00:14:02,700
this function we're going to get a hold of the previous notes or whatever is the previous value of this
134

135
00:14:02,760 --> 00:14:10,590
notes array which at the moment it's empty but soon it's going to be populated with notes objects. And
135

136
00:14:10,590 --> 00:14:17,370
to add to this notes array we're going to use the spread operator again so that we get hold of all of
136

137
00:14:17,370 --> 00:14:26,050
the previous notes and then add the new note at the end. If you find it easier it might be worth changing
137

138
00:14:26,050 --> 00:14:28,740
this property to new note
138

139
00:14:28,750 --> 00:14:35,200
and remember you can call it anything you want here as long as you know that this value is being passed
139

140
00:14:35,200 --> 00:14:37,900
over from here.
140

141
00:14:37,900 --> 00:14:43,540
So now that we've created this array we're going to have to return it to get rid of that little squiggly
141

142
00:14:43,540 --> 00:14:44,220
line
142

143
00:14:44,350 --> 00:14:51,250
so that setNotes actually gets a array being returned and that is going to be set as the new notes
143

144
00:14:51,310 --> 00:14:52,910
array.
144

145
00:14:53,070 --> 00:14:59,550
So now all we have to do is the last step which is to take the array and render separate note components
145

146
00:14:59,550 --> 00:15:02,160
for each of the items in the array.
146

147
00:15:02,160 --> 00:15:07,220
Notice how we've got the squiggly line under notes and it's because we're not using it anywhere.
147

148
00:15:07,320 --> 00:15:09,390
So let's do that right here.
148

149
00:15:09,930 --> 00:15:17,010
So at the moment I've got a sample note being created but instead of creating the sample note, I want
149

150
00:15:17,010 --> 00:15:25,560
to use my notes array and map through it to render a different note component for each item inside the
150

151
00:15:25,560 --> 00:15:26,660
array.
151

152
00:15:26,670 --> 00:15:32,330
My map is going to take a function and I'm just going to create an arrow function in this case.
152

153
00:15:32,970 --> 00:15:40,590
And for each of the note items inside this notes array remember that the map function is going to loop
153

154
00:15:40,590 --> 00:15:48,650
through this notes array and get hold of each of the note items inside and execute this function.
154

155
00:15:48,810 --> 00:15:57,840
Then I'm going to return a new note component and this note component is going to need some properties
155

156
00:15:57,840 --> 00:15:59,130
passed over.
156

157
00:15:59,190 --> 00:16:06,120
So one of these is going to be the title which is going to be set as noteItem.title.
157

158
00:16:06,120 --> 00:16:12,080
The next is the content which is going to be the noteItem.content.
158

159
00:16:12,330 --> 00:16:18,030
And now in order for this code to be recognized as Javascript I'm going to go ahead and select all of
159

160
00:16:18,030 --> 00:16:23,080
it and add the curly braces around it so that my errors go away.
160

161
00:16:23,970 --> 00:16:32,330
So now I can replace this static note with the notes that are created from my create note component.
161

162
00:16:32,700 --> 00:16:35,280
And if I go ahead and try it out
162

163
00:16:35,340 --> 00:16:36,870
so I've got a title,
163

164
00:16:36,870 --> 00:16:44,050
'This is a new note and here is some content'.
164

165
00:16:45,440 --> 00:16:56,280
I click Add and it gets added down in here. My array gets a new object with some title and some content
165

166
00:16:56,670 --> 00:17:03,450
like so. That's step one completed, implementing the add note functionality.
166

167
00:17:03,570 --> 00:17:11,400
Step two is to implement the delete note functionality and the first step of doing this involves creating
167

168
00:17:11,400 --> 00:17:19,740
a callback from the note component to trigger a delete function. Inside our note component we have a delete
168

169
00:17:19,890 --> 00:17:21,090
button.
169

170
00:17:21,090 --> 00:17:27,720
And what we want to do is to be able to somehow get this delete button to trigger a function in the
170

171
00:17:27,720 --> 00:17:33,780
App.jsx. And to do this we're going to have to rely on our props.
171

172
00:17:33,780 --> 00:17:37,490
We're going to have to tap into the onClick attribute here.
172

173
00:17:37,770 --> 00:17:46,260
And when the button gets clicked we're going to handle the click and I'm going to create a function
173

174
00:17:46,350 --> 00:17:49,220
up here which is going to be called handleClick.
174

175
00:17:49,380 --> 00:17:55,900
Now you can of course have this as an inline anonymous arrow function if you want, but I'm just gonna
175

176
00:17:55,920 --> 00:17:56,810
keep it separate
176

177
00:17:56,820 --> 00:18:02,550
so it's a little bit easier to see what's going on. Now inside this handleClick is where we're going
177

178
00:18:02,550 --> 00:18:08,060
to trigger a function that gets passed over from the props that will delete this note from the array.
178

179
00:18:09,220 --> 00:18:15,480
So back in our app component, we're going to create a another function below the addNote which is going
179

180
00:18:15,480 --> 00:18:24,510
to be deleteNote. And we're going to need the id of the note that needs to be deleted.
180

181
00:18:24,870 --> 00:18:31,770
And then this function as it is is going to be passed over to each of these notes that gets rendered
181

182
00:18:32,220 --> 00:18:34,270
as a property.
182

183
00:18:34,380 --> 00:18:39,220
So I'm going to call it onDelete and I'm going to add it inside here
183

184
00:18:39,300 --> 00:18:44,300
deleteNote as the function that's going to be passed over.
184

185
00:18:44,310 --> 00:18:51,370
So now if we go ahead and create a note and add it when we click on the note component in our React dev tools,
185

186
00:18:51,510 --> 00:18:57,390
you can see that it's got a prop called onDelete that we can tap into which is going to trigger the delete
186

187
00:18:57,450 --> 00:19:03,970
Note function. Inside our Note.jsx, inside the handleClick function
187

188
00:19:03,970 --> 00:19:12,220
we're going to tap into props.onDelete and that's going to trigger this function right here.
188

189
00:19:12,220 --> 00:19:22,580
So let's go ahead and log that this delete was triggered. And now if I go ahead and create a new note,
189

190
00:19:22,940 --> 00:19:30,200
click Add and click delete, then you can see that 'Delete was triggered' gets printed in the console.
190

191
00:19:30,260 --> 00:19:37,190
So we're now able to trigger our deleteNote function in our app component but instead of console logging
191

192
00:19:37,310 --> 00:19:45,890
we're probably going to want to somehow remove the note from our notes array. So we can do that using
192

193
00:19:45,950 --> 00:19:55,900
setNotes. And inside setNotes we can get hold of the previous notes just as we did up here.
193

194
00:19:56,560 --> 00:20:02,680
So let's go ahead and create a new arrow function which uses the previous notes.
194

195
00:20:02,710 --> 00:20:10,420
Now once we have access to all of the previous notes array, well then we can loop through it using the
195

196
00:20:10,480 --> 00:20:11,800
filter function.
196

197
00:20:12,190 --> 00:20:18,510
And remember that the filter function takes a function that accepts up to three arguments.
197

198
00:20:18,640 --> 00:20:22,600
We can go ahead and add a arrow function inside.
198

199
00:20:22,600 --> 00:20:27,800
So this is our function that's being passed to our filter function
199

200
00:20:28,000 --> 00:20:30,370
and it can take up to three arguments.
200

201
00:20:30,580 --> 00:20:34,680
The first one is the value that we're currently looping through in the array.
201

202
00:20:35,050 --> 00:20:37,300
So that's going to be the noteItem.
202

203
00:20:37,960 --> 00:20:42,370
And the second one is the index of this item.
203

204
00:20:42,400 --> 00:20:48,010
So that's going to be really useful very shortly when we're going to be checking to see which ones we
204

205
00:20:48,010 --> 00:20:51,270
want to filter out. Inside our filter function
205

206
00:20:51,280 --> 00:21:00,550
we're going to return all of the notes where the index does not equal the id of the note that needs
206

207
00:21:00,550 --> 00:21:02,100
to be deleted.
207

208
00:21:02,110 --> 00:21:08,290
So this way we should end up with an array that contains everything in the previous notes other than
208

209
00:21:08,290 --> 00:21:17,620
the ones where the index matches the id of the note to be deleted. And we're going to need to return
209

210
00:21:17,620 --> 00:21:28,780
it in order to set it as the new notes array. The last thing we need to do is somehow pass over the index
210

211
00:21:29,080 --> 00:21:34,420
of the note that is being deleted through this deleteNote function.
211

212
00:21:34,630 --> 00:21:39,610
Now at the moment when we create our note, we actually don't pass over
212

213
00:21:39,610 --> 00:21:47,590
firstly the required key attribute but also some sort of id attribute that we can then pass back when
213

214
00:21:47,590 --> 00:21:50,860
we want to delete that note.
214

215
00:21:51,160 --> 00:21:57,790
This is the last step in the challenge. Somehow passing id over to the note component and pass it back
215

216
00:21:57,790 --> 00:22:00,100
to the app when deleting.
216

217
00:22:00,100 --> 00:22:02,110
How do we create this id?
217

218
00:22:02,380 --> 00:22:09,730
We can of course create the id using a uuid or some sort of timestamp that's unique.
218

219
00:22:09,730 --> 00:22:16,510
But the simplest way in this case is to know that map works very similarly to filter. In that in the
219

220
00:22:16,510 --> 00:22:17,490
callback function,
220

221
00:22:17,500 --> 00:22:23,400
you can have the value but you can also get the index of the current item that's being looped through.
221

222
00:22:23,830 --> 00:22:29,680
Let's go ahead and add a set of parentheses around our note item because we're going to add a second
222

223
00:22:29,680 --> 00:22:39,670
parameter which is the index. And we're going to use that index both as the key and also as the id.
223

224
00:22:41,040 --> 00:22:43,770
When each of these note components are rendered
224

225
00:22:43,770 --> 00:22:51,450
we're going to be passing over the index of the noteItem from the notes array as the id which we
225

226
00:22:51,450 --> 00:22:59,520
can then pick up inside our note component so that when we call props.onDelete we pass over that
226

227
00:22:59,520 --> 00:23:08,280
prop id. So we can happen to props.id and send it back when we trigger the onDelete.
227

228
00:23:08,280 --> 00:23:11,570
So now if we hit save and we check it out,
228

229
00:23:11,640 --> 00:23:23,400
so let's create a new title 'A new note' and click add, and then if we click delete it will disappear from
229

230
00:23:23,400 --> 00:23:30,790
the array. Now the last a little bug that you might want to address is when you click on the add button
230

231
00:23:31,300 --> 00:23:34,810
the title and the content should really clear itself.
231

232
00:23:34,840 --> 00:23:39,260
So how can we do this? Well inside our createArea
232

233
00:23:39,440 --> 00:23:49,150
once we've submitted the note, we can also clear out this note object. We can call setNote and we can
233

234
00:23:49,150 --> 00:23:54,010
pass it the same object that we had to begin with.
234

235
00:23:54,010 --> 00:24:01,990
This way when we call submitNote, the note gets added over to our App.jsx and we set the note state
235

236
00:24:02,230 --> 00:24:10,450
to both an empty title and an empty content. And because our input has the value of note.title, our text
236

237
00:24:10,450 --> 00:24:15,990
Area has a value of note.content, it should reflect the state of the notes.
237

238
00:24:16,060 --> 00:24:17,110
Let's try it out.
238

239
00:24:17,110 --> 00:24:23,050
If we type something in title, type something in the notes, click add and they both disappear and go back
239

240
00:24:23,050 --> 00:24:25,610
to the original placeholder text.
240

241
00:24:25,720 --> 00:24:31,690
So this is the solution to the full challenge and it's a really long one and it's a really hard one
241

242
00:24:32,020 --> 00:24:35,710
but there isn't anything that you haven't learnt in previous lessons.
242

243
00:24:35,710 --> 00:24:41,620
So if you got stuck in any of these places then be sure to head back to the relevant section where we
243

244
00:24:41,620 --> 00:24:46,870
covered it so that you can get a little bit more familiar with each of these steps so that you could
244

245
00:24:46,870 --> 00:24:50,510
complete this challenge comfortably by yourself.
245

246
00:24:50,590 --> 00:24:56,530
Now all we have left is some tidying up and in the next lesson I want to show you how you can add some
246

247
00:24:56,530 --> 00:25:03,530
dependencies using React to get hold of some components that we can use in our React apps.
247

248
00:25:03,550 --> 00:25:05,790
So for all of that and more, I'll see you there.