1
00:00:00,090 --> 00:00:05,940
In this video, we'll see how to delete the two item or the note so that when we click on this are removed

2
00:00:05,940 --> 00:00:07,740
from basketball or some delete function.

3
00:00:07,920 --> 00:00:10,050
Then it should delete nature, disappear from the screen.

4
00:00:10,320 --> 00:00:11,280
Lindsey, how to do that?

5
00:00:12,090 --> 00:00:14,220
So first to click that.

6
00:00:14,490 --> 00:00:16,320
But this to perform a supplement request.

7
00:00:16,530 --> 00:00:17,460
This should be a button.

8
00:00:17,520 --> 00:00:18,960
The delete icon should be a button.

9
00:00:19,380 --> 00:00:21,030
So we'll make it as a button.

10
00:00:22,700 --> 00:00:23,270
The bottom.

11
00:00:25,820 --> 00:00:27,980
Inside this bottom, we need to have this political.

12
00:00:34,390 --> 00:00:40,210
So as you can see, whenever you click on a button on, it should perform an action, so on click.

13
00:00:42,070 --> 00:00:44,270
It should call some function called handle.

14
00:00:46,880 --> 00:00:50,630
So when this function is gone, we'll write the code for that function.

15
00:00:54,020 --> 00:00:54,740
So function.

16
00:00:58,020 --> 00:00:58,740
And you click.

17
00:01:06,440 --> 00:01:12,650
So whenever they call this function, then we have to call a functioning set of dogs that takes the

18
00:01:12,680 --> 00:01:16,790
idea of this idea of this note item.

19
00:01:17,120 --> 00:01:20,420
But that's why we are sending this idea in the note component.

20
00:01:20,720 --> 00:01:21,990
This idea will be next.

21
00:01:22,010 --> 00:01:24,830
That means we are sending the next item that we want to delete.

22
00:01:25,610 --> 00:01:26,030
OK.

23
00:01:26,330 --> 00:01:30,830
So help us and that we will use props that there should be a function.

24
00:01:30,830 --> 00:01:32,630
So will have that function on delete.

25
00:01:35,550 --> 00:01:36,680
Props up 80.

26
00:01:37,200 --> 00:01:42,870
So it was handing the item 80, the item which we want to delete from got it by calling 900 function

27
00:01:42,870 --> 00:01:45,420
props so that we have to catch here.

28
00:01:45,420 --> 00:01:46,000
Insert have.

29
00:01:47,290 --> 00:01:49,020
Elizabeth Clifford handling and everything.

30
00:01:49,830 --> 00:01:50,760
So you're on the lead.

31
00:01:50,760 --> 00:01:52,860
We have to have this prop on the lid.

32
00:01:54,710 --> 00:01:56,570
Then it should call a function delayed, not.

33
00:01:57,320 --> 00:02:03,740
OK, so this delayed not takes the parameter as this problem started will right the function for that

34
00:02:03,740 --> 00:02:06,710
delayed, not off the bat, so function.

35
00:02:09,710 --> 00:02:10,300
The lead.

36
00:02:11,680 --> 00:02:12,040
Not.

37
00:02:14,660 --> 00:02:15,560
Griffith Diary.

38
00:02:18,750 --> 00:02:23,590
And then said, North, I'll explain the code lineman and operate in the.

39
00:02:24,330 --> 00:02:25,440
It it's not.

40
00:02:28,610 --> 00:02:29,180
Return.

41
00:02:30,400 --> 00:02:33,400
We have not not felt that.

42
00:02:35,440 --> 00:02:37,600
This will take two parameters note item.

43
00:02:38,780 --> 00:02:39,770
For my next.

44
00:02:45,340 --> 00:02:46,410
The index.

45
00:02:47,490 --> 00:02:49,340
Articles from A.

46
00:02:51,080 --> 00:02:51,940
Nobody wants to.

47
00:03:00,230 --> 00:03:01,730
So I guess I'm this chicken.

48
00:03:02,090 --> 00:03:02,360
Yeah.

49
00:03:02,810 --> 00:03:03,770
So everything is fine.

50
00:03:08,400 --> 00:03:09,440
That is some.

51
00:03:10,970 --> 00:03:11,360
OK.

52
00:03:16,660 --> 00:03:24,760
So, yeah, so what is happening is here inside the delete note function, basically a baking diary

53
00:03:24,760 --> 00:03:26,320
of the item that we want to delete from that.

54
00:03:26,890 --> 00:03:32,770
And so the delete from that is that means we have to change the value of this note array, right?

55
00:03:33,340 --> 00:03:34,810
So that's going to change this value.

56
00:03:34,810 --> 00:03:40,030
We have to call this if not so a function that not functions will take the parameters of the previous

57
00:03:40,030 --> 00:03:41,740
value of the notes constraint.

58
00:03:42,100 --> 00:03:45,940
So until the previous not waterboard are the two new items that are available in the notes.

59
00:03:45,940 --> 00:03:47,800
It will take that as a parameter.

60
00:03:48,040 --> 00:03:54,070
And then what we are returning is going to be a returning area that filters the item that they're having

61
00:03:54,460 --> 00:03:57,400
that are not having the index that are equal to that.

62
00:03:58,000 --> 00:04:02,680
So basically, they're having the array of items, for example, five items, then we want the third

63
00:04:02,680 --> 00:04:03,550
item to be deleted.

64
00:04:04,090 --> 00:04:11,050
So it is filtering all the items that are present and said that it which have not having this like equals

65
00:04:11,080 --> 00:04:13,700
to index so which are not equivalent.

66
00:04:13,720 --> 00:04:19,200
The next article so that that means we are filtering one, two, four and five objects other than zero

67
00:04:19,210 --> 00:04:23,440
three that will in turn will be stored in that and we are running that at it.

68
00:04:24,310 --> 00:04:27,190
So that means we have this is how the filter function works.

69
00:04:27,500 --> 00:04:30,280
Basically, we are filtering that image on the condition that is given.

70
00:04:31,470 --> 00:04:38,370
One thing is for the north, the north will now contain the value of the dollar will be the item after

71
00:04:38,370 --> 00:04:44,160
deleting the item that we wanted that the user is prompting a study by clicking on the delete function.

72
00:04:44,610 --> 00:04:49,590
So are basically doing this by, say, a new function as props on the left retaining a function.

73
00:04:50,250 --> 00:04:55,920
So whenever a person clicks on this button, we are calling the problem and then we are sending that

74
00:04:55,920 --> 00:04:58,280
item so that we can get this idea.

75
00:04:58,300 --> 00:05:02,310
We are using this function and then deleting the item that we want or delete from that area.

76
00:05:02,760 --> 00:05:05,040
So this is how the delete mechanism is done.

77
00:05:05,470 --> 00:05:06,240
You can check here.

78
00:05:06,630 --> 00:05:08,190
I am giving some random thing.

79
00:05:08,430 --> 00:05:09,510
We are getting a note.

80
00:05:09,780 --> 00:05:12,360
And then once they click on this basket, they are deleting it.

81
00:05:12,840 --> 00:05:14,220
And so you can also.

82
00:05:14,580 --> 00:05:16,800
So it continues.

83
00:05:17,520 --> 00:05:18,330
I'm deleting this.

84
00:05:18,570 --> 00:05:21,060
You can see that getting deleted and getting it.

85
00:05:21,840 --> 00:05:22,950
So everything is fine.

86
00:05:23,520 --> 00:05:25,560
Now we are like adding the nodes.

87
00:05:25,920 --> 00:05:30,870
Leading the nodes, like the functionality that we want to perform is done.

88
00:05:31,170 --> 00:05:37,650
But now, as you can see in the May no website initially, be it having a take a note to create area

89
00:05:37,650 --> 00:05:38,010
only.

90
00:05:38,220 --> 00:05:42,620
But then when the user clicks on this, then it is expanding to title and taking note.

91
00:05:42,630 --> 00:05:48,600
And also there is some action in the background a footer like Copyright 2021 and also the design for

92
00:05:48,600 --> 00:05:49,320
the notes, right?

93
00:05:50,460 --> 00:05:55,080
The note is like a good enough, not very ugly as in the case here.

94
00:05:55,500 --> 00:06:01,020
So now we'll tackle these problems the animation over here, the background color of the footer, the

95
00:06:01,020 --> 00:06:02,280
styling part of the notes.

96
00:06:02,790 --> 00:06:05,220
So these are the remaining parts for us to complete.