1
00:00:00,00 --> 00:00:03,900


2
00:00:04,000 --> 00:00:08,800
Today,let's do the ToDoApp.

3
00:00:08,900 --> 00:00:13,700
I have to mention one thing first,

4
00:00:13,800 --> 00:00:18,600
You are seeing us in the same dress for the 
past three days' videos. Actually, those 
videos were shooted in a single day.

5
00:00:18,700 --> 00:00:23,500
The fact is he is really lazy to take a bath.

6
00:00:23,600 --> 00:00:28,400
[laughter]

7
00:00:28,500 --> 00:00:33,300
He discussed about it right before the shooting,

8
00:00:33,400 --> 00:00:38,200
Due to lockdown, I couldn't go to home.

9
00:00:38,300 --> 00:00:43,100
I am forced to take a bath while staying 
here.

10
00:00:43,200 --> 00:00:48,000
When did I say that? how could you kidding 
me like this?

11
00:00:48,100 --> 00:00:52,900
Didn't you say it right before?

12
00:00:53,000 --> 00:00:57,800
[laughter]

13
00:00:57,900 --> 00:01:02,700
Here there is no hot water here.

14
00:01:02,800 --> 00:01:07,600
Let's start creating ToDoList.

15
00:01:07,700 --> 00:01:12,500
We write down the tasks to do and remove 
them after completing them.

16
00:01:12,600 --> 00:01:17,400


17
00:01:17,500 --> 00:01:22,300
There is a input field to add tasks.And an 
add button.

18
00:01:22,400 --> 00:01:27,200
To do items will be listed out below when 
we press the add button.

19
00:01:27,300 --> 00:01:32,100
And tick mark option after completing the 
task.

20
00:01:32,200 --> 00:01:37,000
Let's do it quickly.

21
00:01:37,100 --> 00:01:41,900
Designing is a time consuming process.

22
00:01:42,000 --> 00:01:46,800
The design is finished by professor sidheek 
and you can find it from GitHub which is 
included in the description box.

23
00:01:46,900 --> 00:01:51,700
Go to that GitHub link, don't copy the entire 
project.

24
00:01:51,800 --> 00:01:56,600
Go to src

25
00:01:56,700 --> 00:02:01,500
There is two files called App.js and App.css.

26
00:02:01,600 --> 00:02:06,400
First let's copy the html code inside it.

27
00:02:06,500 --> 00:02:11,300
Let's copy that xml from there.

28
00:02:11,400 --> 00:02:16,200
Just a component as mentioned earlier.

29
00:02:16,300 --> 00:02:21,100
Anyone who learned web designing before can 
design the component.

30
00:02:21,200 --> 00:02:26,000
We will demonstrate designing while doing 
the Netflix project.

31
00:02:26,100 --> 00:02:30,900
Here it is a simple design you can finish 
it quickly.

32
00:02:31,000 --> 00:02:35,800
No need to explain this.

33
00:02:35,900 --> 00:02:40,700
We have already copied JSX to App.js and 
CSS to App.css.

34
00:02:40,800 --> 00:02:45,600
We have to import it in App.js.

35
00:02:45,700 --> 00:02:50,500


36
00:02:50,600 --> 00:02:55,400


37
00:02:55,500 --> 00:03:00,300
Let's run this.

38
00:03:00,400 --> 00:03:05,200
npm start, let's see the output quickly.

39
00:03:05,300 --> 00:03:10,100


40
00:03:10,200 --> 00:03:15,000
To do item appeared with a dummy item.But 
there is no button.

41
00:03:15,100 --> 00:03:19,900
What we will do to show the button.

42
00:03:20,000 --> 00:03:24,800
Which button?Add button.

43
00:03:24,900 --> 00:03:29,700
We have to add the CDN of fontawsome library 
from where we have taken all these buttons.

44
00:03:29,800 --> 00:03:34,600
Google it

45
00:03:34,700 --> 00:03:39,500
Fontawsome

46
00:03:39,600 --> 00:03:44,400


47
00:03:44,500 --> 00:03:49,300
There is a small logo ,taken from fontawsome.

48
00:03:49,400 --> 00:03:54,200
Cdn is in first line enter into that link.

49
00:03:54,300 --> 00:03:59,100
Press the copy link tag.

50
00:03:59,200 --> 00:04:04,000
Paste it in index.html

51
00:04:04,100 --> 00:04:08,900


52
00:04:09,000 --> 00:04:13,800


53
00:04:13,900 --> 00:04:18,700
Save and refresh

54
00:04:18,800 --> 00:04:23,600
It appeared in our app.

55
00:04:23,700 --> 00:04:28,500
Next we have to give action to these items.

56
00:04:28,600 --> 00:04:33,400
First let's give action to add button.

57
00:04:33,500 --> 00:04:38,300
We know what to do about that. State.

58
00:04:38,400 --> 00:04:43,200
We have to manage the state for that lets 
import useState.

59
00:04:43,300 --> 00:04:48,100


60
00:04:48,200 --> 00:04:53,000


61
00:04:53,100 --> 00:04:57,900
This is a list

62
00:04:58,000 --> 00:05:02,800
Let's give it as toDo

63
00:05:02,900 --> 00:05:07,700
What are we going to do with each state.

64
00:05:07,800 --> 00:05:12,600


65
00:05:12,700 --> 00:05:17,500
Going to place multiple toDos inside an array.

66
00:05:17,600 --> 00:05:22,400
We are familier with counter already,

67
00:05:22,500 --> 00:05:27,300
now we are going to place an array inside 
the state.

68
00:05:27,400 --> 00:05:32,200


69
00:05:32,300 --> 00:05:37,100


70
00:05:37,200 --> 00:05:42,000
We are giving an empty array as default.

71
00:05:42,100 --> 00:05:46,900


72
00:05:47,000 --> 00:05:51,800
Now find the input field

73
00:05:51,900 --> 00:05:56,700
We have to give an action when the button 
is getting pressed.

74
00:05:56,800 --> 00:06:01,600
Before that, we have to keep it according 
to each change.

75
00:06:01,700 --> 00:06:06,500
For that let's create another state.

76
00:06:06,600 --> 00:06:11,400
With a name toDo

77
00:06:11,500 --> 00:06:16,300


78
00:06:16,400 --> 00:06:21,200
We are maintaing another state for understanding 
the status of inputting values.

79
00:06:21,300 --> 00:06:26,100
And another state for listing items.

80
00:06:26,200 --> 00:06:31,000
Here let's give an empty string

81
00:06:31,100 --> 00:06:35,900


82
00:06:36,000 --> 00:06:40,800
It is done for doing validation.

83
00:06:40,900 --> 00:06:45,700
It will clear to them when we are doing the 
next step.

84
00:06:45,800 --> 00:06:50,600
Now we have to give the value here.

85
00:06:50,700 --> 00:06:55,500


86
00:06:55,600 --> 00:07:00,400


87
00:07:00,500 --> 00:07:05,300
We are going to call setTodo when there is 
a change in input field.

88
00:07:05,400 --> 00:07:10,200


89
00:07:10,300 --> 00:07:15,100


90
00:07:15,200 --> 00:07:20,000
We are going to take the last data in arrow 
function using event in arrow function.

91
00:07:20,100 --> 00:07:24,900
Called as event can write as e shortly.

92
00:07:25,000 --> 00:07:29,800
onChange is common in html

93
00:07:29,900 --> 00:07:34,700


94
00:07:34,800 --> 00:07:39,600
We get the typed value by e.target.value 
and give it to the setToDo

95
00:07:39,700 --> 00:07:44,500
And it enter into toDo inside the state and 
that toDo will be displayed.

96
00:07:44,600 --> 00:07:49,400


97
00:07:49,500 --> 00:07:54,300
Now let's check

98
00:07:54,400 --> 00:07:59,200
It is working while typing

99
00:07:59,300 --> 00:08:04,100
What is the next thing to do?

100
00:08:04,200 --> 00:08:09,000
One thing to notice here.

101
00:08:09,100 --> 00:08:13,900
Take the code again.

102
00:08:14,000 --> 00:08:18,800


103
00:08:18,900 --> 00:08:23,700
Let's place a console here.

104
00:08:23,800 --> 00:08:28,600
No need

105
00:08:28,700 --> 00:08:33,500
What is next?

106
00:08:33,600 --> 00:08:38,400
We have to take this toDo into toDos

107
00:08:38,500 --> 00:08:43,300
About this thing,

108
00:08:43,400 --> 00:08:48,200
We are taking the data inside to do when 
we need to do validation.

109
00:08:48,300 --> 00:08:53,100
Is there any need to display it while typing?

110
00:08:53,200 --> 00:08:58,000
ok , no need for that.

111
00:08:58,100 --> 00:09:02,900


112
00:09:03,000 --> 00:09:07,800
In this case..

113
00:09:07,900 --> 00:09:12,700
What is the need of a state here?

114
00:09:12,800 --> 00:09:17,600


115
00:09:17,700 --> 00:09:22,500
Can we avoid this state?

116
00:09:22,600 --> 00:09:27,400
This is not a form

117
00:09:27,500 --> 00:09:32,300


118
00:09:32,400 --> 00:09:37,200
We can't use the documentgetelemtbyid method 
to take the value.

119
00:09:37,300 --> 00:09:42,100


120
00:09:42,200 --> 00:09:47,000
This is the normal convention in react to 
take input value.

121
00:09:47,100 --> 00:09:51,900
There is another method for handling multiple 
input  fields.

122
00:09:52,000 --> 00:09:56,800
How we get this value by pressing the add 
button.

123
00:09:56,900 --> 00:10:01,700
Usually we use document.getElementByID method

124
00:10:01,800 --> 00:10:06,600
But this is the react methodd

125
00:10:06,700 --> 00:10:11,500
We have to maintain a state for each component

126
00:10:11,600 --> 00:10:16,400
To maintain changing datas.

127
00:10:16,500 --> 00:10:21,300
Give action to add button click.

128
00:10:21,400 --> 00:10:26,200


129
00:10:26,300 --> 00:10:31,100


130
00:10:31,200 --> 00:10:36,000


131
00:10:36,100 --> 00:10:40,900
We have to pass toDo into setDos

132
00:10:41,000 --> 00:10:45,800
This  is an array.

133
00:10:45,900 --> 00:10:50,700
What is that method for add items into an 
array?push

134
00:10:50,800 --> 00:10:55,600
push method is not applicable here.

135
00:10:55,700 --> 00:11:00,500
Hence we need spread operator here.

136
00:11:00,600 --> 00:11:05,400
Give toDos first.

137
00:11:05,500 --> 00:11:10,300
We are going to spread toDo inside an array.

138
00:11:10,400 --> 00:11:15,200


139
00:11:15,300 --> 00:11:20,100
plus providing toDo also.

140
00:11:20,200 --> 00:11:25,000


141
00:11:25,100 --> 00:11:29,900


142
00:11:30,000 --> 00:11:34,800
toDo is already an array when we spread it 
will split into single values.

143
00:11:34,900 --> 00:11:39,700
When a new value come it will added into 
the array.

144
00:11:39,800 --> 00:11:44,600
Use spread operator to place values in seperate 
position

145
00:11:44,700 --> 00:11:49,500
If toDos already have three values.

146
00:11:49,600 --> 00:11:54,400


147
00:11:54,500 --> 00:11:59,300
When we write toDo after comma,Then it will 
become a single array

148
00:11:59,400 --> 00:12:04,200
By merging the values.

149
00:12:04,300 --> 00:12:09,100


150
00:12:09,200 --> 00:12:14,000


151
00:12:14,100 --> 00:12:18,900
You can't see the changes now.

152
00:12:19,000 --> 00:12:23,800
It will be addded while pressing add button.

153
00:12:23,900 --> 00:12:28,700


154
00:12:28,800 --> 00:12:33,600
We have to dynamically display toDo and toDos 
classes.

155
00:12:33,700 --> 00:12:38,500
For that let's use the map function.

156
00:12:38,600 --> 00:12:43,400
Let's apply map function in toDos array

157
00:12:43,500 --> 00:12:48,300
Simple matter

158
00:12:48,400 --> 00:12:53,200


159
00:12:53,300 --> 00:12:58,100


160
00:12:58,200 --> 00:13:03,000


161
00:13:03,100 --> 00:13:07,900


162
00:13:08,000 --> 00:13:12,800


163
00:13:12,900 --> 00:13:17,700


164
00:13:17,800 --> 00:13:22,600
Don't forgot to return it.

165
00:13:22,700 --> 00:13:27,500
Only one component is allowed to return.

166
00:13:27,600 --> 00:13:32,400


167
00:13:32,500 --> 00:13:37,300
value is a string

168
00:13:37,400 --> 00:13:42,200
We have to place value here.

169
00:13:42,300 --> 00:13:47,100
When we call the map function we get the 
value of each position into {value}.

170
00:13:47,200 --> 00:13:52,000
You can give any name instead of value.

171
00:13:52,100 --> 00:13:56,900
It will works when the page gets refreshed.

172
00:13:57,000 --> 00:14:01,800
The dummy data is gone now.

173
00:14:01,900 --> 00:14:06,700
Why it goes? Is the value is null?

174
00:14:06,800 --> 00:14:11,600
map is not working because array is  empty 
now.

175
00:14:11,700 --> 00:14:16,500


176
00:14:16,600 --> 00:14:21,400
But it will works when an item added into 
toDos array.

177
00:14:21,500 --> 00:14:26,300
Set,add another item

178
00:14:26,400 --> 00:14:31,200
Super good job

179
00:14:31,300 --> 00:14:36,100
This is a simple matter.

180
00:14:36,200 --> 00:14:41,000
React is very intresting.

181
00:14:41,100 --> 00:14:45,900


182
00:14:46,000 --> 00:14:50,800
Please share the experience of trying to 
do a to do app without teaching the basics 
first.

183
00:14:50,900 --> 00:14:55,700
This is the reshooting of making todo app.

184
00:14:55,800 --> 00:15:00,600
We decided to teach basics concepts first 
to avoid confusions.

185
00:15:00,700 --> 00:15:05,500


186
00:15:05,600 --> 00:15:10,400
You can do this app with ten minutes if you 
are good with basics.

187
00:15:10,500 --> 00:15:15,300
Tick mark is showing because this is a checkbox.

188
00:15:15,400 --> 00:15:20,200


189
00:15:20,300 --> 00:15:25,100
You should clear your thoungh first.

190
00:15:25,200 --> 00:15:30,000
First you have to take a bath,

191
00:15:30,100 --> 00:15:34,900


192
00:15:35,000 --> 00:15:39,800
Check box is a status for true or false

193
00:15:39,900 --> 00:15:44,700
We pass string to the array.

194
00:15:44,800 --> 00:15:49,600
Let's replace string with an object.

195
00:15:49,700 --> 00:15:54,500
value and status

196
00:15:54,600 --> 00:15:59,400


197
00:15:59,500 --> 00:16:04,300


198
00:16:04,400 --> 00:16:09,200


199
00:16:09,300 --> 00:16:14,100
Default value of status is false.

200
00:16:14,200 --> 00:16:19,000
Don't we replace this empty array with objects?

201
00:16:19,100 --> 00:16:23,900
No,this is array of objects.

202
00:16:24,000 --> 00:16:28,800


203
00:16:28,900 --> 00:16:33,700
toDos is an array

204
00:16:33,800 --> 00:16:38,600


205
00:16:38,700 --> 00:16:43,500
We are storing toDo into text

206
00:16:43,600 --> 00:16:48,400
Status is false

207
00:16:48,500 --> 00:16:53,300


208
00:16:53,400 --> 00:16:58,200


209
00:16:58,300 --> 00:17:03,100


210
00:17:03,200 --> 00:17:08,000


211
00:17:08,100 --> 00:17:12,900
Here an object array is coming.

212
00:17:13,000 --> 00:17:17,800


213
00:17:17,900 --> 00:17:22,700
We can't see any changes now.

214
00:17:22,800 --> 00:17:27,600


215
00:17:27,700 --> 00:17:32,500


216
00:17:32,600 --> 00:17:37,400
Since it is an object we have to give value.text

217
00:17:37,500 --> 00:17:42,300


218
00:17:42,400 --> 00:17:47,200


219
00:17:47,300 --> 00:17:52,100


220
00:17:52,200 --> 00:17:57,000


221
00:17:57,100 --> 00:18:01,900


222
00:18:02,000 --> 00:18:06,800


223
00:18:06,900 --> 00:18:11,700


224
00:18:11,800 --> 00:18:16,600


225
00:18:16,700 --> 00:18:21,500
Now let's try

226
00:18:21,600 --> 00:18:26,400
Status is false by defult

227
00:18:26,500 --> 00:18:31,300


228
00:18:31,400 --> 00:18:36,200


229
00:18:36,300 --> 00:18:41,100
We have to place an id here

230
00:18:41,200 --> 00:18:46,000


231
00:18:46,100 --> 00:18:50,900
We can take Date as an id.

232
00:18:51,000 --> 00:18:55,800


233
00:18:55,900 --> 00:19:00,700


234
00:19:00,800 --> 00:19:05,600


235
00:19:05,700 --> 00:19:10,500
Id is a long string created by converting 
current time into millisecond.

236
00:19:10,600 --> 00:19:15,400


237
00:19:15,500 --> 00:19:20,300


238
00:19:20,400 --> 00:19:25,200


239
00:19:25,300 --> 00:19:30,100


240
00:19:30,200 --> 00:19:35,000


241
00:19:35,100 --> 00:19:39,900
We have to find the marked(in checkbox) object.

242
00:19:40,000 --> 00:19:44,800
We have to make the status false

243
00:19:44,900 --> 00:19:49,700


244
00:19:49,800 --> 00:19:54,600


245
00:19:54,700 --> 00:19:59,500
Is there  any object called e in onChange?

246
00:19:59,600 --> 00:20:04,400
yes e object is there as an argument.

247
00:20:04,500 --> 00:20:09,300
We write an arrow function inside the onChange

248
00:20:09,400 --> 00:20:14,200
Let's console e now.

249
00:20:14,300 --> 00:20:19,100


250
00:20:19,200 --> 00:20:24,000
What is the value when we put a tick mark? 
it is a boolean value.

251
00:20:24,100 --> 00:20:28,900
Let's console the value

252
00:20:29,000 --> 00:20:33,800
Did you understand which value is this?

253
00:20:33,900 --> 00:20:38,700
This value coming from map.

254
00:20:38,800 --> 00:20:43,600
Wait there is a confusion there.

255
00:20:43,700 --> 00:20:48,500
Did you want to change the value name as 
an object?

256
00:20:48,600 --> 00:20:53,400
Ok, changing the name to object is much better.

257
00:20:53,500 --> 00:20:58,300


258
00:20:58,400 --> 00:21:03,200


259
00:21:03,300 --> 00:21:08,100
We have to print obj here.

260
00:21:08,200 --> 00:21:13,000


261
00:21:13,100 --> 00:21:17,900


262
00:21:18,000 --> 00:21:22,800
e.target is the value inside the check box.

263
00:21:22,900 --> 00:21:27,700
That value is not defined by us.

264
00:21:27,800 --> 00:21:32,600
Take the inspect first.

265
00:21:32,700 --> 00:21:37,500
Take the console

266
00:21:37,600 --> 00:21:42,400
We have to include key id in the map.

267
00:21:42,500 --> 00:21:47,300


268
00:21:47,400 --> 00:21:52,200


269
00:21:52,300 --> 00:21:57,100
Select the check box.

270
00:21:57,200 --> 00:22:02,000
The object is printed here.

271
00:22:02,100 --> 00:22:06,900
This is false. We have to change it to true 
while clicking it.

272
00:22:07,000 --> 00:22:11,800
We have to write code for that.

273
00:22:11,900 --> 00:22:16,700


274
00:22:16,800 --> 00:22:21,600
We have filter the content using this id.

275
00:22:21,700 --> 00:22:26,500


276
00:22:26,600 --> 00:22:31,400
Multiple items will be present here.

277
00:22:31,500 --> 00:22:36,300
Let's write the code for that.

278
00:22:36,400 --> 00:22:41,200


279
00:22:41,300 --> 00:22:46,100
We have to change the status of toDos while 
pressing the button.

280
00:22:46,200 --> 00:22:51,000


281
00:22:51,100 --> 00:22:55,900
What is the use of filter here.

282
00:22:56,000 --> 00:23:00,800
For filtering the id, Which id?

283
00:23:00,900 --> 00:23:05,700
What are we going to do while clicking this?

284
00:23:05,800 --> 00:23:10,600
There will be an id for every object here.

285
00:23:10,700 --> 00:23:15,500


286
00:23:15,600 --> 00:23:20,400
We are going to filter  the elements using 
that id.

287
00:23:20,500 --> 00:23:25,300


288
00:23:25,400 --> 00:23:30,200
We are going to move the value inside the 
target.value if the id matches

289
00:23:30,300 --> 00:23:35,100
Let's do that now

290
00:23:35,200 --> 00:23:40,000
We are going to give a new array here.

291
00:23:40,100 --> 00:23:44,900
We get a new array after filtering.

292
00:23:45,000 --> 00:23:49,800


293
00:23:49,900 --> 00:23:54,700
We can filter elements in different ways 
according to our logic.

294
00:23:54,800 --> 00:23:59,600
It is similar to an ordinary filter.

295
00:23:59,700 --> 00:24:04,500


296
00:24:04,600 --> 00:24:09,400
We have to return items

297
00:24:09,500 --> 00:24:14,300
When we call toDos.filter this obj2 value 
is an object

298
00:24:14,400 --> 00:24:19,200
We have to write the logic for checking each 
items in the array.

299
00:24:19,300 --> 00:24:24,100


300
00:24:24,200 --> 00:24:29,000


301
00:24:29,100 --> 00:24:33,900
Let's use if here.

302
00:24:34,000 --> 00:24:38,800


303
00:24:38,900 --> 00:24:43,700


304
00:24:43,800 --> 00:24:48,600


305
00:24:48,700 --> 00:24:53,500
What is this second object?

306
00:24:53,600 --> 00:24:58,400


307
00:24:58,500 --> 00:25:03,300
We are checking this condiition with each 
position of toDos array.

308
00:25:03,400 --> 00:25:08,200


309
00:25:08,300 --> 00:25:13,100


310
00:25:13,200 --> 00:25:18,000


311
00:25:18,100 --> 00:25:22,900


312
00:25:23,000 --> 00:25:27,800
We have to return object2

313
00:25:27,900 --> 00:25:32,700


314
00:25:32,800 --> 00:25:37,600
The filter give us objects.

315
00:25:37,700 --> 00:25:42,500
We can return the object we needed from the 
array.