1
00:00:01,080 --> 00:00:02,610
‫So we just learned what

2
00:00:02,610 --> 00:00:05,220
‫Child-To-Parent Communication means.

3
00:00:05,220 --> 00:00:07,470
‫And so let's now do some more of it

4
00:00:07,470 --> 00:00:10,953
‫in order to delete items from our list.

5
00:00:12,600 --> 00:00:15,450
‫So the idea here is that whenever we click

6
00:00:15,450 --> 00:00:18,690
‫on one of these crosses here next to an item,

7
00:00:18,690 --> 00:00:21,390
‫it will then delete the item from the state

8
00:00:21,390 --> 00:00:24,570
‫and therefore from the user interface.

9
00:00:24,570 --> 00:00:27,210
‫Now since this click here will happen

10
00:00:27,210 --> 00:00:30,090
‫inside the item component...

11
00:00:30,090 --> 00:00:33,720
‫So remember each of them is actually an item component.

12
00:00:33,720 --> 00:00:35,820
‫And so the click to delete,

13
00:00:35,820 --> 00:00:37,590
‫so on each of these crosses,

14
00:00:37,590 --> 00:00:40,260
‫will happen inside of the item.

15
00:00:40,260 --> 00:00:43,740
‫But the state actually lives in the app.

16
00:00:43,740 --> 00:00:45,420
‫So in the parent component.

17
00:00:45,420 --> 00:00:47,700
‫And therefore this is another case

18
00:00:47,700 --> 00:00:49,893
‫of Child-To-Parent Communication.

19
00:00:51,480 --> 00:00:53,910
‫So let's now go back here to our app

20
00:00:53,910 --> 00:00:56,190
‫which is where our state lives.

21
00:00:56,190 --> 00:00:59,010
‫And then all we're going to do is to create

22
00:00:59,010 --> 00:01:01,863
‫a new function right here called handleDeleteItem.

23
00:01:05,730 --> 00:01:08,580
‫Now, in order to delete an item, we need to know

24
00:01:08,580 --> 00:01:12,123
‫which item it actually is that should be deleted.

25
00:01:13,230 --> 00:01:15,630
‫So in order to do that...

26
00:01:15,630 --> 00:01:18,600
‫So to tell this function which item it is,

27
00:01:18,600 --> 00:01:23,600
‫we will pass in the ID whenever we later call dysfunction.

28
00:01:23,820 --> 00:01:27,780
‫So remember that each of these items here has an ID,

29
00:01:27,780 --> 00:01:30,330
‫and so we can then use that ID to remove

30
00:01:30,330 --> 00:01:33,960
‫the corresponding object from the items array.

31
00:01:33,960 --> 00:01:36,480
‫Now about the delete operation itself,

32
00:01:36,480 --> 00:01:39,420
‫we will of course delete the item from the user

33
00:01:39,420 --> 00:01:41,943
‫interface by updating state.

34
00:01:42,900 --> 00:01:45,480
‫So we call setItems.

35
00:01:45,480 --> 00:01:49,290
‫And now here in setItems, we need the new array

36
00:01:49,290 --> 00:01:51,363
‫after the item has been deleted.

37
00:01:52,380 --> 00:01:55,020
‫Now once again this new items array

38
00:01:55,020 --> 00:01:57,360
‫will be based on the current one.

39
00:01:57,360 --> 00:02:01,110
‫And so we need a callback function which receives

40
00:02:01,110 --> 00:02:04,230
‫the current item as its input.

41
00:02:04,230 --> 00:02:09,230
‫And so now let's say items.filter

42
00:02:09,780 --> 00:02:12,720
‫which will loop over the array and in each iteration

43
00:02:12,720 --> 00:02:16,071
‫it will get access to the items object.

44
00:02:16,071 --> 00:02:20,430
‫And so now, basically, all we want to do is to filter out

45
00:02:20,430 --> 00:02:25,083
‫the item that has the ID that we got here, right?

46
00:02:25,920 --> 00:02:30,920
‫So item.id is different from the ID.

47
00:02:32,310 --> 00:02:34,440
‫So the ID that we pass in.

48
00:02:34,440 --> 00:02:36,630
‫So whenever this condition here is true,

49
00:02:36,630 --> 00:02:39,540
‫the item will end up in the new array.

50
00:02:39,540 --> 00:02:43,680
‫So of the array of the items that have not been deleted.

51
00:02:43,680 --> 00:02:48,680
‫But when this is false, so when item.id is equal the ID,

52
00:02:48,930 --> 00:02:53,280
‫then that element will no longer be part of the final array.

53
00:02:53,280 --> 00:02:55,020
‫And so that's how we remove,

54
00:02:55,020 --> 00:02:58,140
‫so how we delete elements from arrays.

55
00:02:58,140 --> 00:03:00,900
‫And once again, if this is strange, please go back

56
00:03:00,900 --> 00:03:05,460
‫to the section where I review essential JavaScript concepts.

57
00:03:05,460 --> 00:03:09,000
‫So there I teach in detail about how this works.

58
00:03:09,000 --> 00:03:12,210
‫And now all we have to do is to call dysfunction

59
00:03:12,210 --> 00:03:14,043
‫whenever the click here happens.

60
00:03:14,910 --> 00:03:17,161
‫So how do we get that there?

61
00:03:17,161 --> 00:03:20,250
‫Well, we now need to pass the function

62
00:03:20,250 --> 00:03:24,180
‫as a prop also into the packing list.

63
00:03:24,180 --> 00:03:25,380
‫So into the packing list

64
00:03:25,380 --> 00:03:29,460
‫because the items are called inside the packing list.

65
00:03:29,460 --> 00:03:30,937
‫So onDeleteItem,

66
00:03:32,730 --> 00:03:37,500
‫and so I'm using the same naming convention

67
00:03:37,500 --> 00:03:41,250
‫as before where I call the prop on the lead item

68
00:03:41,250 --> 00:03:43,650
‫and then pass in the function, handleDeleteItem.

69
00:03:44,850 --> 00:03:48,180
‫And so now let's receive this prop here

70
00:03:48,180 --> 00:03:49,593
‫inside the packing list.

71
00:03:52,050 --> 00:03:54,120
‫So we already have items.

72
00:03:54,120 --> 00:03:56,400
‫So let's add this one here to the list.

73
00:03:56,400 --> 00:03:58,410
‫And again, this is so helpful because

74
00:03:58,410 --> 00:04:00,660
‫now we know immediately what props

75
00:04:00,660 --> 00:04:02,283
‫the packing list will receive.

76
00:04:03,720 --> 00:04:05,793
‫And then remember that the click

77
00:04:05,793 --> 00:04:09,000
‫actually happens here on this button.

78
00:04:09,000 --> 00:04:11,130
‫So inside the item component.

79
00:04:11,130 --> 00:04:16,080
‫And so here we also will need access to this prop.

80
00:04:16,080 --> 00:04:18,000
‫Therefore we now need to pass it in

81
00:04:18,000 --> 00:04:20,103
‫along the item right here.

82
00:04:21,360 --> 00:04:23,853
‫So onDeleteItem = onDeleteItem.

83
00:04:25,320 --> 00:04:28,200
‫And so we're basically passing now this prop

84
00:04:28,200 --> 00:04:31,500
‫through the packing list into the item.

85
00:04:31,500 --> 00:04:35,130
‫So it moves here from app to packing list

86
00:04:35,130 --> 00:04:38,100
‫and then to each of these items.

87
00:04:38,100 --> 00:04:40,800
‫So packing list itself doesn't really need it,

88
00:04:40,800 --> 00:04:42,600
‫but of course, this is the only place

89
00:04:42,600 --> 00:04:44,130
‫where we can receive it.

90
00:04:44,130 --> 00:04:49,037
‫Because we cannot pass it directly from app to item, right?

91
00:04:49,950 --> 00:04:51,633
‫So that would not be possible.

92
00:04:53,280 --> 00:04:54,790
‫Okay. And now here

93
00:04:56,100 --> 00:04:57,630
‫we use the onClick prop

94
00:04:57,630 --> 00:05:00,960
‫and then we specify or handler function.

95
00:05:00,960 --> 00:05:03,630
‫Now if we do just this, onDeleteItem,

96
00:05:06,240 --> 00:05:08,640
‫then this is not going to work.

97
00:05:08,640 --> 00:05:09,810
‫So let's see why.

98
00:05:09,810 --> 00:05:11,223
‫So let's test this here.

99
00:05:12,330 --> 00:05:14,790
‫And so you see that nothing happens.

100
00:05:14,790 --> 00:05:17,940
‫So we can see that here also in app

101
00:05:17,940 --> 00:05:20,643
‫when we try to log the ID.

102
00:05:21,930 --> 00:05:26,930
‫And so now you will see that, well nothing happens.

103
00:05:27,390 --> 00:05:31,323
‫Because what we get in here instead of an ID, is this event.

104
00:05:32,460 --> 00:05:33,783
‫So what's going on here?

105
00:05:35,280 --> 00:05:39,600
‫Well, when we simply specify the function here like this,

106
00:05:39,600 --> 00:05:43,350
‫then React will call the function as the event happens,

107
00:05:43,350 --> 00:05:47,280
‫and it does so by passing in the event object.

108
00:05:47,280 --> 00:05:50,703
‫So we actually used this to our advantage in the form,

109
00:05:51,960 --> 00:05:55,110
‫so right here where we then received the event.

110
00:05:55,110 --> 00:05:58,500
‫But right now we do not want to receive the event,

111
00:05:58,500 --> 00:06:01,860
‫but instead the ID of the current item.

112
00:06:01,860 --> 00:06:04,953
‫And so we need to create a new function here,

113
00:06:06,135 --> 00:06:09,510
‫and then we pass in the current ID.

114
00:06:09,510 --> 00:06:11,883
‫So item.id.

115
00:06:12,720 --> 00:06:15,720
‫And once more, it's really important

116
00:06:15,720 --> 00:06:17,640
‫that you don't forget this.

117
00:06:17,640 --> 00:06:19,230
‫Because otherwise React

118
00:06:19,230 --> 00:06:21,450
‫will just immediately call the function

119
00:06:21,450 --> 00:06:23,490
‫which is not what we want.

120
00:06:23,490 --> 00:06:26,850
‫We want a function here really, so that React

121
00:06:26,850 --> 00:06:30,483
‫can then call this function only when the event happens.

122
00:06:32,220 --> 00:06:33,840
‫And this is actually it.

123
00:06:33,840 --> 00:06:36,090
‫So this should do the job.

124
00:06:36,090 --> 00:06:37,410
‫Let's see.

125
00:06:37,410 --> 00:06:39,420
‫And beautiful.

126
00:06:39,420 --> 00:06:40,770
‫So that's gone.

127
00:06:40,770 --> 00:06:44,463
‫You see here also the ID that we locked to the console.

128
00:06:45,540 --> 00:06:48,446
‫And so it was based on that ID that the new

129
00:06:48,446 --> 00:06:50,553
‫items array was set.

130
00:06:51,600 --> 00:06:53,730
‫So the state was updated,

131
00:06:53,730 --> 00:06:56,550
‫which forced React to rerender the component,

132
00:06:56,550 --> 00:06:59,760
‫or in other words, to rerender the component's view,

133
00:06:59,760 --> 00:07:01,443
‫so to be a bit more specific.

134
00:07:02,760 --> 00:07:04,140
‫So let's try that again.

135
00:07:04,140 --> 00:07:06,393
‫And yeah, then we cleaned everything.

136
00:07:07,410 --> 00:07:10,050
‫Now, let's also since we're already here,

137
00:07:10,050 --> 00:07:12,960
‫get rid of these initial items

138
00:07:12,960 --> 00:07:15,570
‫because now we are getting this ESLint warning

139
00:07:15,570 --> 00:07:17,610
‫that this is never used.

140
00:07:17,610 --> 00:07:20,850
‫So again, really helpful here from ESLint.

141
00:07:20,850 --> 00:07:22,950
‫And yeah, just by the way,

142
00:07:22,950 --> 00:07:25,050
‫we could of course also have used

143
00:07:25,050 --> 00:07:28,620
‫these initial items here as our initial state.

144
00:07:28,620 --> 00:07:31,323
‫And so then whenever we would reload,

145
00:07:32,730 --> 00:07:33,783
‫well, not this.

146
00:07:34,860 --> 00:07:36,930
‫So whenever we would reload here,

147
00:07:36,930 --> 00:07:39,600
‫then we would get these three as a default.

148
00:07:39,600 --> 00:07:42,540
‫So they would then get added into our state

149
00:07:42,540 --> 00:07:45,030
‫and then everything would work the same.

150
00:07:45,030 --> 00:07:48,870
‫So we could also delete them here and as we reloaded,

151
00:07:48,870 --> 00:07:50,490
‫then they would be back.

152
00:07:50,490 --> 00:07:52,931
‫But that's not what we want.

153
00:07:52,931 --> 00:07:55,833
‫So let's just get rid of all this.

154
00:07:56,790 --> 00:07:57,690
‫Beautiful.

155
00:07:57,690 --> 00:08:00,802
‫And now all we have to do here for the final operation

156
00:08:00,802 --> 00:08:03,990
‫is to implement this functionality.

157
00:08:03,990 --> 00:08:05,370
‫So where we click here,

158
00:08:05,370 --> 00:08:08,910
‫and then it will mark the item as packed.

159
00:08:08,910 --> 00:08:11,793
‫So that's going to be our topic for the next lecture.