1
00:00:01,110 --> 00:00:04,710
‫Next up, let's take care of updating items

2
00:00:04,710 --> 00:00:06,993
‫by toggling their packed status.

3
00:00:08,130 --> 00:00:09,960
‫So basically that's the functionality

4
00:00:09,960 --> 00:00:13,623
‫that I showed you by the end of the previous lecture.

5
00:00:14,970 --> 00:00:18,120
‫So this is what we want to implement in our app now.

6
00:00:18,120 --> 00:00:20,220
‫And so to start we actually need

7
00:00:20,220 --> 00:00:22,773
‫to create those check boxes there.

8
00:00:24,420 --> 00:00:27,720
‫So right now we don't even have that checkbox.

9
00:00:27,720 --> 00:00:31,620
‫And so let's go here to our item.

10
00:00:31,620 --> 00:00:36,620
‫And before the span, let's now add an input of the type...

11
00:00:38,970 --> 00:00:40,713
‫And here we want a string.

12
00:00:43,740 --> 00:00:45,453
‫So of the type checkbox.

13
00:00:47,610 --> 00:00:49,320
‫So that's something.

14
00:00:49,320 --> 00:00:50,700
‫So we can actually already

15
00:00:50,700 --> 00:00:52,890
‫toggle this one here on and off now,

16
00:00:52,890 --> 00:00:55,710
‫but of course it's not going to do anything.

17
00:00:55,710 --> 00:00:58,500
‫So basically we want to also transform

18
00:00:58,500 --> 00:01:02,460
‫this element right here into a controlled element.

19
00:01:02,460 --> 00:01:04,800
‫And remember, a controlled element means

20
00:01:04,800 --> 00:01:08,640
‫that the element has the value defined by some state

21
00:01:08,640 --> 00:01:10,380
‫and it also has an event handler

22
00:01:10,380 --> 00:01:12,180
‫which listens for the change

23
00:01:12,180 --> 00:01:14,103
‫and updates the state accordingly.

24
00:01:16,590 --> 00:01:19,380
‫So let's do those two things.

25
00:01:19,380 --> 00:01:21,720
‫And first, the value will be given

26
00:01:21,720 --> 00:01:26,340
‫by the item.checked status.

27
00:01:26,340 --> 00:01:30,270
‫And so this checked here is always a true or false value.

28
00:01:30,270 --> 00:01:32,370
‫And so that is exactly the type of value

29
00:01:32,370 --> 00:01:36,240
‫that we need to pass into the value of a checkbox.

30
00:01:36,240 --> 00:01:39,750
‫And actually here it should be packed and not checked

31
00:01:39,750 --> 00:01:42,420
‫which maybe you had already noticed.

32
00:01:42,420 --> 00:01:44,970
‫But anyway, now let's keep going here.

33
00:01:44,970 --> 00:01:49,470
‫And so now next up we need to add on change handler.

34
00:01:49,470 --> 00:01:52,110
‫So we need to listen for the change event,

35
00:01:52,110 --> 00:01:53,460
‫which basically happens

36
00:01:53,460 --> 00:01:56,850
‫each time that we click here on the checkbox.

37
00:01:56,850 --> 00:01:57,960
‫Now here for now,

38
00:01:57,960 --> 00:02:01,980
‫let's actually specify just an empty function.

39
00:02:01,980 --> 00:02:03,993
‫So a function that doesn't do anything.

40
00:02:04,950 --> 00:02:06,900
‫And here we're missing this.

41
00:02:06,900 --> 00:02:07,740
‫All right.

42
00:02:07,740 --> 00:02:10,500
‫And so the reason for that is that of course

43
00:02:10,500 --> 00:02:11,580
‫this function here

44
00:02:11,580 --> 00:02:14,580
‫that we are eventually going to specify here

45
00:02:14,580 --> 00:02:18,543
‫is going to change the packed value of the item state.

46
00:02:19,710 --> 00:02:23,100
‫And so that function will once again be placed

47
00:02:23,100 --> 00:02:26,850
‫where the state actually lives, so inside of app.

48
00:02:26,850 --> 00:02:29,580
‫And then we will pass it down using a prop

49
00:02:29,580 --> 00:02:32,850
‫just like we did with on delete item.

50
00:02:32,850 --> 00:02:34,320
‫So this is something similar.

51
00:02:34,320 --> 00:02:36,270
‫So instead of deleting an item,

52
00:02:36,270 --> 00:02:39,210
‫we will simply now update one item.

53
00:02:39,210 --> 00:02:41,190
‫And so again, that update happens

54
00:02:41,190 --> 00:02:44,253
‫each time that we click here on the checkbox.

55
00:02:45,360 --> 00:02:47,913
‫So let's now write that function here.

56
00:02:49,500 --> 00:02:54,120
‫So function, and again, starting with the handle keyword,

57
00:02:54,120 --> 00:02:57,180
‫and then toggle item.

58
00:02:57,180 --> 00:02:58,350
‫And that's because here

59
00:02:58,350 --> 00:03:01,590
‫we will only toggle the packed property.

60
00:03:01,590 --> 00:03:05,310
‫So not allow anyone to update the entire object

61
00:03:05,310 --> 00:03:09,003
‫but only really to change the value of that packed property.

62
00:03:10,110 --> 00:03:14,280
‫So in order to know which object we actually need to change

63
00:03:14,280 --> 00:03:17,100
‫we need to again pass in the ID.

64
00:03:17,100 --> 00:03:21,510
‫And so then let's again set the items.

65
00:03:21,510 --> 00:03:23,790
‫And then we need to pass in a new array

66
00:03:23,790 --> 00:03:28,470
‫which, just like before, will depend on the current array.

67
00:03:28,470 --> 00:03:31,110
‫So we have our callback function here.

68
00:03:31,110 --> 00:03:32,280
‫And so now in order

69
00:03:32,280 --> 00:03:35,580
‫to update one of the objects in the array,

70
00:03:35,580 --> 00:03:39,630
‫we will simply loop over the entire items array

71
00:03:39,630 --> 00:03:41,580
‫using the map property

72
00:03:41,580 --> 00:03:44,820
‫which will then in the end return a brand new array

73
00:03:44,820 --> 00:03:48,600
‫with the same length of the initial items array.

74
00:03:48,600 --> 00:03:50,100
‫But one of the objects

75
00:03:50,100 --> 00:03:52,260
‫will then, of course, have been updated.

76
00:03:52,260 --> 00:03:57,260
‫So in the iteration, each of the elements is called an item.

77
00:03:57,420 --> 00:03:59,880
‫And then here is what we're gonna do.

78
00:03:59,880 --> 00:04:03,360
‫So whenever the item has the ID

79
00:04:03,360 --> 00:04:06,750
‫that is equal to the ID that we passed in,

80
00:04:06,750 --> 00:04:09,000
‫so which means that this is the object

81
00:04:09,000 --> 00:04:11,250
‫that we want to actually update,

82
00:04:11,250 --> 00:04:16,250
‫then we create a brand new object based on the current item,

83
00:04:17,220 --> 00:04:22,220
‫and then we set packed to the opposite of packed,

84
00:04:23,970 --> 00:04:26,730
‫so of item.packed.

85
00:04:26,730 --> 00:04:27,780
‫And that's it.

86
00:04:27,780 --> 00:04:30,750
‫And if else, so for all the other objects,

87
00:04:30,750 --> 00:04:33,243
‫we will simply return the current item.

88
00:04:35,520 --> 00:04:36,750
‫And just once again,

89
00:04:36,750 --> 00:04:39,390
‫I want to emphasize that I covered exactly

90
00:04:39,390 --> 00:04:42,900
‫that this is how we update an object in an array

91
00:04:42,900 --> 00:04:46,350
‫in great depth, in the section where we review

92
00:04:46,350 --> 00:04:48,570
‫essential JavaScript for React.

93
00:04:48,570 --> 00:04:52,620
‫So please go there in case that this looks strange.

94
00:04:52,620 --> 00:04:56,523
‫But for everyone else, let's just keep going here.

95
00:04:57,840 --> 00:05:02,310
‫And now also add this function here into the packing list

96
00:05:02,310 --> 00:05:05,733
‫so that the packing list can then add it into the item.

97
00:05:06,570 --> 00:05:08,580
‫So we use, once again, the props

98
00:05:08,580 --> 00:05:10,803
‫basically as a communication channel here.

99
00:05:11,970 --> 00:05:16,910
‫So on toggle items, handle toggle item.

100
00:05:20,850 --> 00:05:23,040
‫So on toggle item right here.

101
00:05:23,040 --> 00:05:25,200
‫And now let's just copy this,

102
00:05:25,200 --> 00:05:30,200
‫add it here to the list of props, exactly like this.

103
00:05:30,510 --> 00:05:33,933
‫And then we pass it into the item itself.

104
00:05:35,130 --> 00:05:36,333
‫Let's do that here.

105
00:05:39,840 --> 00:05:41,252
‫All right.

106
00:05:41,252 --> 00:05:42,623
‫And finally we receive it here.

107
00:05:44,310 --> 00:05:46,740
‫So again, we need to use the packing list here

108
00:05:46,740 --> 00:05:51,210
‫as an intermediary step in order to reach the item itself.

109
00:05:51,210 --> 00:05:55,350
‫And so now here we can then replace this empty function

110
00:05:55,350 --> 00:05:57,660
‫with calling on toggle item

111
00:05:57,660 --> 00:06:00,750
‫with, just like before, the current ID,

112
00:06:00,750 --> 00:06:01,950
‫so that we actually know

113
00:06:02,930 --> 00:06:05,820
‫which is the object that we need to change.

114
00:06:05,820 --> 00:06:08,640
‫All right and that's actually it,

115
00:06:08,640 --> 00:06:10,980
‫or at least it should be.

116
00:06:10,980 --> 00:06:12,600
‫So let's see if that works.

117
00:06:12,600 --> 00:06:17,600
‫So one socks, let's say one shirt and one charger.

118
00:06:18,060 --> 00:06:23,060
‫And now as we click here, yeah, beautiful.

119
00:06:23,070 --> 00:06:25,200
‫So it updates our checkbox

120
00:06:25,200 --> 00:06:29,280
‫and you see that it also updates here these strikethrough.

121
00:06:29,280 --> 00:06:33,870
‫So that's coming exactly here from when the item is packed.

122
00:06:33,870 --> 00:06:36,450
‫And the same of course, works for all the other ones

123
00:06:36,450 --> 00:06:38,520
‫because if we click on this one

124
00:06:38,520 --> 00:06:41,640
‫then the item.ID will be another one

125
00:06:41,640 --> 00:06:45,090
‫and so therefore then this function here

126
00:06:45,090 --> 00:06:46,500
‫receives another value

127
00:06:46,500 --> 00:06:48,960
‫which will then update another object.

128
00:06:48,960 --> 00:06:52,230
‫And the deleting here of course, also works.

129
00:06:52,230 --> 00:06:55,650
‫And so, we are done with building

130
00:06:55,650 --> 00:06:59,670
‫these two operations that we can perform on items.

131
00:06:59,670 --> 00:07:03,780
‫So toggling their packed status and deleting them.

132
00:07:03,780 --> 00:07:05,610
‫Now before moving on,

133
00:07:05,610 --> 00:07:09,570
‫please just make sure to review the code that we wrote here.

134
00:07:09,570 --> 00:07:12,270
‫So just to make sure that you understand, basically,

135
00:07:12,270 --> 00:07:13,920
‫everything that's happening here,

136
00:07:13,920 --> 00:07:16,110
‫why we are doing it this way,

137
00:07:16,110 --> 00:07:20,790
‫and the way we then pass in these functions as props

138
00:07:20,790 --> 00:07:21,750
‫all the way down

139
00:07:21,750 --> 00:07:24,780
‫until the components that actually need them.

140
00:07:24,780 --> 00:07:27,840
‫So this is, again, child-to-parent communication

141
00:07:27,840 --> 00:07:30,450
‫which is something that we're going to use all the time.

142
00:07:30,450 --> 00:07:33,510
‫And so make sure that you really understand this concept

143
00:07:33,510 --> 00:07:35,670
‫as well as lifting up state

144
00:07:35,670 --> 00:07:38,010
‫until you move on to the next lecture

145
00:07:38,010 --> 00:07:40,803
‫which is going to be about derived state.