00:04.0
00:08.8
Today,let's do the ToDoApp.
00:08.9
00:13.7
I have to mention one thing first,
00:13.8
00:18.6
You are seeing us in the same dress for the past three days' videos. Actually, those videos were shooted in a single day.
00:18.7
00:23.5
The fact is he is really lazy to take a bath.
00:28.5
00:33.3
He discussed about it right before the shooting,
00:33.4
00:38.2
Due to lockdown, I couldn't go to home.
00:38.3
00:43.1
I am forced to take a bath while staying here.
00:43.2
00:48.0
When did I say that? how could you kidding me like this?
00:48.1
00:52.9
Didn't you say it right before?
00:57.9
01:02.7
Here there is no hot water here.
01:02.8
01:07.6
Let's start creating ToDoList.
01:07.7
01:12.5
We write down the tasks to do and remove them after completing them.
01:17.5
01:22.3
There is a input field to add tasks.And an add button.
01:22.4
01:27.2
To do items will be listed out below when we press the add button.
01:27.3
01:32.1
And tick mark option after completing the task.
01:32.2
01:37.0
Let's do it quickly.
01:37.1
01:41.9
Designing is a time consuming process.
01:42.0
01:46.8
The design is finished by professor sidheek and you can find it from GitHub which is included in the description box.
01:46.9
01:51.7
Go to that GitHub link, don't copy the entire project.
01:56.7
02:01.5
There is two files called App.js and App.css.
02:01.6
02:06.4
First let's copy the html code inside it.
02:06.5
02:11.3
Let's copy that xml from there.
02:11.4
02:16.2
Just a component as mentioned earlier.
02:16.3
02:21.1
Anyone who learned web designing before can design the component.
02:21.2
02:26.0
We will demonstrate designing while doing the Netflix project.
02:26.1
02:30.9
Here it is a simple design you can finish it quickly.
02:31.0
02:35.8
No need to explain this.
02:35.9
02:40.7
We have already copied JSX to App.js and CSS to App.css.
02:40.8
02:45.6
We have to import it in App.js.
02:55.5
03:00.3
Let's run this.
03:00.4
03:05.2
npm start, let's see the output quickly.
03:10.2
03:15.0
To do item appeared with a dummy item.But there is no button.
03:15.1
03:19.9
What we will do to show the button.
03:20.0
03:24.8
Which button?Add button.
03:24.9
03:29.7
We have to add the CDN of fontawsome library from where we have taken all these buttons.
03:44.5
03:49.3
There is a small logo ,taken from fontawsome.
03:49.4
03:54.2
Cdn is in first line enter into that link.
03:54.3
03:59.1
Press the copy link tag.
03:59.2
04:04.0
Paste it in index.html
04:13.9
04:18.7
Save and refresh
04:18.8
04:23.6
It appeared in our app.
04:23.7
04:28.5
Next we have to give action to these items.
04:28.6
04:33.4
First let's give action to add button.
04:33.5
04:38.3
We know what to do about that. State.
04:38.4
04:43.2
We have to manage the state for that lets import useState.
04:53.1
04:57.9
This is a list
04:58.0
05:02.8
Let's give it as toDo
05:02.9
05:07.7
What are we going to do with each state.
05:12.7
05:17.5
Going to place multiple toDos inside an array.
05:17.6
05:22.4
We are familier with counter already,
05:22.5
05:27.3
now we are going to place an array inside the state.
05:37.2
05:42.0
We are giving an empty array as default.
05:47.0
05:51.8
Now find the input field
05:51.9
05:56.7
We have to give an action when the button is getting pressed.
05:56.8
06:01.6
Before that, we have to keep it according to each change.
06:01.7
06:06.5
For that let's create another state.
06:06.6
06:11.4
With a name toDo
06:16.4
06:21.2
We are maintaing another state for understanding the status of inputting values.
06:21.3
06:26.1
And another state for listing items.
06:26.2
06:31.0
Here let's give an empty string
06:36.0
06:40.8
It is done for doing validation.
06:40.9
06:45.7
It will clear to them when we are doing the next step.
06:45.8
06:50.6
Now we have to give the value here.
07:00.5
07:05.3
We are going to call setTodo when there is a change in input field.
07:15.2
07:20.0
We are going to take the last data in arrow function using event in arrow function.
07:20.1
07:24.9
Called as event can write as e shortly.
07:25.0
07:29.8
onChange is common in html
07:34.8
07:39.6
We get the typed value by e.target.value and give it to the setToDo
07:39.7
07:44.5
And it enter into toDo inside the state and that toDo will be displayed.
07:49.5
07:54.3
Now let's check
07:54.4
07:59.2
It is working while typing
07:59.3
08:04.1
What is the next thing to do?
08:04.2
08:09.0
One thing to notice here.
08:09.1
08:13.9
Take the code again.
08:18.9
08:23.7
Let's place a console here.
08:28.7
08:33.5
What is next?
08:33.6
08:38.4
We have to take this toDo into toDos
08:38.5
08:43.3
About this thing,
08:43.4
08:48.2
We are taking the data inside to do when we need to do validation.
08:48.3
08:53.1
Is there any need to display it while typing?
08:53.2
08:58.0
ok , no need for that.
09:03.0
09:07.8
In this case..
09:07.9
09:12.7
What is the need of a state here?
09:17.7
09:22.5
Can we avoid this state?
09:22.6
09:27.4
This is not a form
09:32.4
09:37.2
We can't use the documentgetelemtbyid method to take the value.
09:42.2
09:47.0
This is the normal convention in react to take input value.
09:47.1
09:51.9
There is another method for handling multiple input fields.
09:52.0
09:56.8
How we get this value by pressing the add button.
09:56.9
10:01.7
Usually we use document.getElementByID method
10:01.8
10:06.6
But this is the react methodd
10:06.7
10:11.5
We have to maintain a state for each component
10:11.6
10:16.4
To maintain changing datas.
10:16.5
10:21.3
Give action to add button click.
10:36.1
10:40.9
We have to pass toDo into setDos
10:41.0
10:45.8
This is an array.
10:45.9
10:50.7
What is that method for add items into an array?push
10:50.8
10:55.6
push method is not applicable here.
10:55.7
11:00.5
Hence we need spread operator here.
11:00.6
11:05.4
Give toDos first.
11:05.5
11:10.3
We are going to spread toDo inside an array.
11:15.3
11:20.1
plus providing toDo also.
11:30.0
11:34.8
toDo is already an array when we spread it will split into single values.
11:34.9
11:39.7
When a new value come it will added into the array.
11:39.8
11:44.6
Use spread operator to place values in seperate position
11:44.7
11:49.5
If toDos already have three values.
11:54.5
11:59.3
When we write toDo after comma,Then it will become a single array
11:59.4
12:04.2
By merging the values.
12:14.1
12:18.9
You can't see the changes now.
12:19.0
12:23.8
It will be addded while pressing add button.
12:28.8
12:33.6
We have to dynamically display toDo and toDos classes.
12:33.7
12:38.5
For that let's use the map function.
12:38.6
12:43.4
Let's apply map function in toDos array
12:43.5
12:48.3
Simple matter
13:17.8
13:22.6
Don't forgot to return it.
13:22.7
13:27.5
Only one component is allowed to return.
13:32.5
13:37.3
value is a string
13:37.4
13:42.2
We have to place value here.
13:42.3
13:47.1
When we call the map function we get the value of each position into {value}.
13:47.2
13:52.0
You can give any name instead of value.
13:52.1
13:56.9
It will works when the page gets refreshed.
13:57.0
14:01.8
The dummy data is gone now.
14:01.9
14:06.7
Why it goes? Is the value is null?
14:06.8
14:11.6
map is not working because array is empty now.
14:16.6
14:21.4
But it will works when an item added into toDos array.
14:21.5
14:26.3
Set,add another item
14:26.4
14:31.2
Super good job
14:31.3
14:36.1
This is a simple matter.
14:36.2
14:41.0
React is very intresting.
14:46.0
14:50.8
Please share the experience of trying to do a to do app without teaching the basics first.
14:50.9
14:55.7
This is the reshooting of making todo app.
14:55.8
15:00.6
We decided to teach basics concepts first to avoid confusions.
15:05.6
15:10.4
You can do this app with ten minutes if you are good with basics.
15:10.5
15:15.3
Tick mark is showing because this is a checkbox.
15:20.3
15:25.1
You should clear your thoungh first.
15:25.2
15:30.0
First you have to take a bath,
15:35.0
15:39.8
Check box is a status for true or false
15:39.9
15:44.7
We pass string to the array.
15:44.8
15:49.6
Let's replace string with an object.
15:49.7
15:54.5
value and status
16:09.3
16:14.1
Default value of status is false.
16:14.2
16:19.0
Don't we replace this empty array with objects?
16:19.1
16:23.9
No,this is array of objects.
16:28.9
16:33.7
toDos is an array
16:38.7
16:43.5
We are storing toDo into text
16:43.6
16:48.4
Status is false
17:08.1
17:12.9
Here an object array is coming.
17:17.9
17:22.7
We can't see any changes now.
17:32.6
17:37.4
Since it is an object we have to give value.text
18:16.7
18:21.5
Now let's try
18:21.6
18:26.4
Status is false by defult
18:36.3
18:41.1
We have to place an id here
18:46.1
18:50.9
We can take Date as an id.
19:05.7
19:10.5
Id is a long string created by converting current time into millisecond.
19:35.1
19:39.9
We have to find the marked(in checkbox) object.
19:40.0
19:44.8
We have to make the status false
19:54.7
19:59.5
Is there any object called e in onChange?
19:59.6
20:04.4
yes e object is there as an argument.
20:04.5
20:09.3
We write an arrow function inside the onChange
20:09.4
20:14.2
Let's console e now.
20:19.2
20:24.0
What is the value when we put a tick mark? it is a boolean value.
20:24.1
20:28.9
Let's console the value
20:29.0
20:33.8
Did you understand which value is this?
20:33.9
20:38.7
This value coming from map.
20:38.8
20:43.6
Wait there is a confusion there.
20:43.7
20:48.5
Did you want to change the value name as an object?
20:48.6
20:53.4
Ok, changing the name to object is much better.
21:03.3
21:08.1
We have to print obj here.
21:18.0
21:22.8
e.target is the value inside the check box.
21:22.9
21:27.7
That value is not defined by us.
21:27.8
21:32.6
Take the inspect first.
21:32.7
21:37.5
Take the console
21:37.6
21:42.4
We have to include key id in the map.
21:52.3
21:57.1
Select the check box.
21:57.2
22:02.0
The object is printed here.
22:02.1
22:06.9
This is false. We have to change it to true while clicking it.
22:07.0
22:11.8
We have to write code for that.
22:16.8
22:21.6
We have filter the content using this id.
22:26.6
22:31.4
Multiple items will be present here.
22:31.5
22:36.3
Let's write the code for that.
22:41.3
22:46.1
We have to change the status of toDos while pressing the button.
22:51.1
22:55.9
What is the use of filter here.
22:56.0
23:00.8
For filtering the id, Which id?
23:00.9
23:05.7
What are we going to do while clicking this?
23:05.8
23:10.6
There will be an id for every object here.
23:15.6
23:20.4
We are going to filter the elements using that id.
23:25.4
23:30.2
We are going to move the value inside the target.value if the id matches
23:30.3
23:35.1
Let's do that now
23:35.2
23:40.0
We are going to give a new array here.
23:40.1
23:44.9
We get a new array after filtering.
23:49.9
23:54.7
We can filter elements in different ways according to our logic.
23:54.8
23:59.6
It is similar to an ordinary filter.
24:04.6
24:09.4
We have to return items
24:09.5
24:14.3
When we call toDos.filter this obj2 value is an object
24:14.4
24:19.2
We have to write the logic for checking each items in the array.
24:29.1
24:33.9
Let's use if here.
24:48.7
24:53.5
What is this second object?
24:58.5
25:03.3
We are checking this condiition with each position of toDos array.
25:23.0
25:27.8
We have to return object2
25:32.8
25:37.6
The filter give us objects.
25:37.7
25:42.5
We can return the object we needed from the array.
