1 00:00:01,050 --> 00:00:03,030 ‫In React, many operations need 2 00:00:03,030 --> 00:00:05,790 ‫to be immutable so operations 3 00:00:05,790 --> 00:00:10,290 ‫where we do not manipulate the underlying data structure. 4 00:00:10,290 --> 00:00:12,960 ‫And so therefore, it's quite important 5 00:00:12,960 --> 00:00:15,900 ‫to know how to add element to a race, 6 00:00:15,900 --> 00:00:19,680 ‫how to delete elements, and also to update elements 7 00:00:19,680 --> 00:00:23,793 ‫all without mutating the original underlying array. 8 00:00:25,080 --> 00:00:27,360 ‫Now these techniques that we're going to learn here 9 00:00:27,360 --> 00:00:31,050 ‫are absolutely essential for React development 10 00:00:31,050 --> 00:00:34,800 ‫but the good news is that they always work in the same way. 11 00:00:34,800 --> 00:00:37,920 ‫And so if you understand here how it works, 12 00:00:37,920 --> 00:00:41,223 ‫then you will be well prepared for the rest of the course. 13 00:00:42,180 --> 00:00:45,840 ‫So as I mentioned, what we want to do here is to learn how 14 00:00:45,840 --> 00:00:48,690 ‫to add elements, how to delete elements, 15 00:00:48,690 --> 00:00:51,300 ‫and how to update elements of an array 16 00:00:51,300 --> 00:00:54,060 ‫without changing the original one. 17 00:00:54,060 --> 00:00:57,360 ‫And so once again, we are going to work 18 00:00:57,360 --> 00:00:59,460 ‫with our array of books. 19 00:00:59,460 --> 00:01:01,440 ‫So an array of objects, 20 00:01:01,440 --> 00:01:03,840 ‫which really is the most common thing, 21 00:01:03,840 --> 00:01:06,570 ‫so the most common data structure that we're going 22 00:01:06,570 --> 00:01:10,263 ‫to find when we work with data on the front end. 23 00:01:12,750 --> 00:01:17,750 ‫So let's say first add a book object to array. 24 00:01:23,610 --> 00:01:27,663 ‫Let's start by creating this new book object here actually. 25 00:01:29,460 --> 00:01:32,973 ‫So this one is going to be the number six here. 26 00:01:33,870 --> 00:01:37,180 ‫The titled should be 27 00:01:39,397 --> 00:01:44,397 ‫"Harry Potter and the Chamber of Secrets". 28 00:01:46,680 --> 00:01:51,213 ‫Secrets, well it's still wrong. 29 00:01:53,250 --> 00:01:58,250 ‫And then the author is JK Rowling. 30 00:01:59,760 --> 00:02:03,063 ‫So you already have one Harry Potter book in the array. 31 00:02:03,063 --> 00:02:05,583 ‫And so now here we add another one. 32 00:02:06,690 --> 00:02:11,190 ‫And in fact, we did already learn how we create a new array 33 00:02:11,190 --> 00:02:13,080 ‫based on an original array 34 00:02:13,080 --> 00:02:15,033 ‫and then adding some other element. 35 00:02:15,990 --> 00:02:18,210 ‫So, we talked about that right at the beginning 36 00:02:18,210 --> 00:02:22,290 ‫of the section when we talked about the spread operator. 37 00:02:22,290 --> 00:02:23,123 ‫Remember that? 38 00:02:24,270 --> 00:02:29,140 ‫So let's say books then after adding, let's say 39 00:02:30,570 --> 00:02:31,653 ‫or after add. 40 00:02:33,510 --> 00:02:38,400 ‫And so all we need to do is to spread all the books here 41 00:02:38,400 --> 00:02:41,040 ‫into this newly created array, 42 00:02:41,040 --> 00:02:44,883 ‫and then simply add another book, so another object. 43 00:02:47,160 --> 00:02:50,660 ‫And then we take a look at this right here. 44 00:02:52,980 --> 00:02:54,900 ‫You see that now we have six of them 45 00:02:54,900 --> 00:02:58,980 ‫and the last one is this one that we just created. 46 00:02:58,980 --> 00:03:01,983 ‫And again, we could add this also to the beginning. 47 00:03:02,880 --> 00:03:06,900 ‫So right here, but it's most common to simply add a new book 48 00:03:06,900 --> 00:03:09,540 ‫right to the end of the array. 49 00:03:09,540 --> 00:03:11,283 ‫So, this one was quite easy. 50 00:03:12,240 --> 00:03:14,970 ‫Now let's delete a book. 51 00:03:14,970 --> 00:03:19,970 ‫So delete a book object from array. 52 00:03:21,180 --> 00:03:24,540 ‫So again, this is always going to work in the exact same way 53 00:03:24,540 --> 00:03:27,000 ‫no matter how the objects look like. 54 00:03:27,000 --> 00:03:30,273 ‫Well, as long as they have an ID, which they usually have. 55 00:03:31,230 --> 00:03:35,913 ‫So now let's create a new array again. 56 00:03:37,230 --> 00:03:38,490 ‫So always new arrays. 57 00:03:38,490 --> 00:03:41,940 ‫We need always to not mutate anything 58 00:03:41,940 --> 00:03:43,830 ‫but create new arrays. 59 00:03:43,830 --> 00:03:47,730 ‫Now in practice, these operations would be abstracted away 60 00:03:47,730 --> 00:03:49,290 ‫into some functions. 61 00:03:49,290 --> 00:03:52,743 ‫So for example, we would create a function called add book 62 00:03:52,743 --> 00:03:57,743 ‫and delete book and update book instead of creating 63 00:03:58,380 --> 00:04:00,450 ‫all these arrays like this. 64 00:04:00,450 --> 00:04:02,880 ‫But of course, this is just to illustrate the idea 65 00:04:02,880 --> 00:04:05,433 ‫and the technique, all right? 66 00:04:06,390 --> 00:04:09,450 ‫So books after delete will be a new array 67 00:04:09,450 --> 00:04:13,620 ‫after the deleting one of the book objects. 68 00:04:13,620 --> 00:04:18,240 ‫So we will basically now create a new array based on books 69 00:04:18,240 --> 00:04:21,000 ‫after add, which we just created. 70 00:04:21,000 --> 00:04:24,810 ‫And now we are going to use one of our array methods. 71 00:04:24,810 --> 00:04:27,960 ‫And so let's together think about this. 72 00:04:27,960 --> 00:04:29,820 ‫So, we want to delete a book. 73 00:04:29,820 --> 00:04:33,090 ‫And so after deleting, the array will be shorter 74 00:04:33,090 --> 00:04:36,540 ‫than before and so which of the array methods 75 00:04:36,540 --> 00:04:39,840 ‫makes an array shorter than it was before? 76 00:04:39,840 --> 00:04:41,310 ‫Well, that's right. 77 00:04:41,310 --> 00:04:43,950 ‫It's the filter array, right? 78 00:04:43,950 --> 00:04:46,200 ‫So when we filter out something, 79 00:04:46,200 --> 00:04:49,170 ‫then the new array will be shorter. 80 00:04:49,170 --> 00:04:54,170 ‫So let's filter and once again, each element here is a book. 81 00:04:57,360 --> 00:05:00,060 ‫And so in this case, let's say we want to delete the book 82 00:05:00,060 --> 00:05:01,650 ‫with the ID number three. 83 00:05:01,650 --> 00:05:06,650 ‫And so we can say book.id is different from three. 84 00:05:09,810 --> 00:05:10,960 ‫And that's actually it. 85 00:05:14,250 --> 00:05:15,663 ‫Let's take a look at that. 86 00:05:16,920 --> 00:05:20,760 ‫So this one has ID two, and the next one has number four. 87 00:05:20,760 --> 00:05:22,773 ‫So three is no longer there. 88 00:05:23,880 --> 00:05:24,713 ‫Great. 89 00:05:24,713 --> 00:05:26,430 ‫So why did this work? 90 00:05:26,430 --> 00:05:30,150 ‫Well, because of what we already learned before. 91 00:05:30,150 --> 00:05:32,940 ‫So, whenever this condition here in the callback 92 00:05:32,940 --> 00:05:36,300 ‫returns a false value then that object 93 00:05:36,300 --> 00:05:38,940 ‫will not be in the final array. 94 00:05:38,940 --> 00:05:42,210 ‫So if we want to delete the book with the ID three, 95 00:05:42,210 --> 00:05:46,110 ‫basically what we want is to include in the final array 96 00:05:46,110 --> 00:05:50,850 ‫all the books where the ID is different from three, right? 97 00:05:50,850 --> 00:05:53,580 ‫Because again, whenever this condition here 98 00:05:53,580 --> 00:05:56,370 ‫is actually true, the object will end up 99 00:05:56,370 --> 00:05:58,740 ‫in the final filtered array. 100 00:05:58,740 --> 00:06:00,870 ‫And so the easiest way of thinking about this 101 00:06:00,870 --> 00:06:02,910 ‫is to actually write a condition 102 00:06:02,910 --> 00:06:06,540 ‫which does place the objects into the new array. 103 00:06:06,540 --> 00:06:10,380 ‫And so again, that happens whenever the book ID is different 104 00:06:10,380 --> 00:06:14,370 ‫than three because when it is three, we want to delete it. 105 00:06:14,370 --> 00:06:16,655 ‫And so yeah, that's exactly what happened here 106 00:06:16,655 --> 00:06:19,533 ‫as we saw here in the result. 107 00:06:22,110 --> 00:06:26,790 ‫Great and again, we would usually create a function 108 00:06:26,790 --> 00:06:29,940 ‫called delete book and then that function would receive 109 00:06:29,940 --> 00:06:32,670 ‫this ID here and then here we would simply use 110 00:06:32,670 --> 00:06:34,320 ‫that ID like this. 111 00:06:34,320 --> 00:06:37,830 ‫But here we're simply like manually deleting the one 112 00:06:37,830 --> 00:06:39,390 ‫with the ID of three. 113 00:06:39,390 --> 00:06:43,050 ‫So again, just to illustrate how it all works. 114 00:06:43,050 --> 00:06:47,467 ‫And so now let's, in the final stage, update a book object, 115 00:06:52,680 --> 00:06:53,943 ‫well, in the array. 116 00:06:54,990 --> 00:06:58,810 ‫So books, let's say after update 117 00:07:00,330 --> 00:07:03,720 ‫and we're going to do it on the books after delete. 118 00:07:03,720 --> 00:07:07,200 ‫So, it's like chaining all of this here, one after another. 119 00:07:07,200 --> 00:07:12,200 ‫But we're storing the intermediate result inside variables. 120 00:07:12,510 --> 00:07:16,920 ‫And again, let's think about what array method we need here. 121 00:07:16,920 --> 00:07:20,040 ‫So after updating one of the book objects, 122 00:07:20,040 --> 00:07:23,070 ‫the resulting array should have the exact same length 123 00:07:23,070 --> 00:07:25,170 ‫as before, right? 124 00:07:25,170 --> 00:07:27,540 ‫And so which method produces an array 125 00:07:27,540 --> 00:07:29,553 ‫which has the same length as before? 126 00:07:30,450 --> 00:07:33,120 ‫Yes, that's the map method. 127 00:07:33,120 --> 00:07:37,290 ‫So map is our choice whenever we want to update an object 128 00:07:37,290 --> 00:07:38,733 ‫that is inside an array. 129 00:07:41,310 --> 00:07:46,310 ‫Okay, so here we now need our turn operator because we, 130 00:07:47,130 --> 00:07:50,940 ‫of course, don't want to do anything for most of the books. 131 00:07:50,940 --> 00:07:54,600 ‫We only want to update exactly one book object 132 00:07:54,600 --> 00:07:57,960 ‫which is the one with the ID that we're looking for. 133 00:07:57,960 --> 00:08:00,150 ‫So, let's imagine we want to update the book 134 00:08:00,150 --> 00:08:05,150 ‫with the ID of one, then let's say book.id if it is one, 135 00:08:07,020 --> 00:08:10,530 ‫then return an updated object, which for now, 136 00:08:10,530 --> 00:08:14,010 ‫let's just write an empty object temporarily. 137 00:08:14,010 --> 00:08:17,580 ‫But if not, well then simply return the book as it is, 138 00:08:17,580 --> 00:08:18,963 ‫so without any changes. 139 00:08:19,860 --> 00:08:24,030 ‫And that's simply book, right? 140 00:08:24,030 --> 00:08:27,240 ‫So let's already look at the result here 141 00:08:27,240 --> 00:08:30,633 ‫just to see that something happened. 142 00:08:34,230 --> 00:08:36,810 ‫So again, we are trying to update the book 143 00:08:36,810 --> 00:08:38,070 ‫with the ID of one. 144 00:08:38,070 --> 00:08:41,460 ‫And so now this one here is indeed just an empty object 145 00:08:41,460 --> 00:08:45,003 ‫because this was the one where book ID was equal to one. 146 00:08:46,380 --> 00:08:48,960 ‫So it was equal to one and so therefore, 147 00:08:48,960 --> 00:08:51,480 ‫then what was returned from this callback function 148 00:08:51,480 --> 00:08:54,450 ‫was this empty object, which is what we see here. 149 00:08:54,450 --> 00:08:55,890 ‫But for all the other other ones, 150 00:08:55,890 --> 00:08:58,530 ‫it simply returned the original object. 151 00:08:58,530 --> 00:09:00,303 ‫So then nothing changed. 152 00:09:01,361 --> 00:09:04,371 ‫Now, right, but of course we don't want 153 00:09:04,371 --> 00:09:09,120 ‫to return this empty object but we want to return an object 154 00:09:09,120 --> 00:09:11,460 ‫which has an updated property. 155 00:09:11,460 --> 00:09:15,690 ‫And in fact, we already learned how to do that way back 156 00:09:15,690 --> 00:09:17,373 ‫again using the spread operator. 157 00:09:18,240 --> 00:09:21,960 ‫So, remember, we simply spread out the current book object 158 00:09:21,960 --> 00:09:23,370 ‫into this object. 159 00:09:23,370 --> 00:09:25,410 ‫So this newly created object. 160 00:09:25,410 --> 00:09:28,530 ‫So, we take basically all of the properties 161 00:09:28,530 --> 00:09:32,100 ‫into this new object and then we can simply overwrite 162 00:09:32,100 --> 00:09:32,933 ‫one of them. 163 00:09:33,930 --> 00:09:38,930 ‫Let's say we want pages again, 1,210. 164 00:09:39,180 --> 00:09:41,760 ‫Let's just do something a bit more dramatic just to see 165 00:09:41,760 --> 00:09:43,023 ‫the result a bit better. 166 00:09:44,130 --> 00:09:49,130 ‫And so yeah, now we have only one page here 167 00:09:49,230 --> 00:09:53,343 ‫while everything else again remains unaffected. 168 00:09:54,930 --> 00:09:58,353 ‫Let's put it 1,210 and there we go. 169 00:09:59,280 --> 00:10:03,840 ‫So we updated one property in one object of the array. 170 00:10:03,840 --> 00:10:07,080 ‫And this is again, something that we do all the time. 171 00:10:07,080 --> 00:10:09,700 ‫And so you just basically need to memorize 172 00:10:09,700 --> 00:10:12,480 ‫this recipe right here. 173 00:10:12,480 --> 00:10:17,480 ‫So when we want to add a new object to an array, we do this. 174 00:10:17,580 --> 00:10:20,370 ‫We create a new array, spread the current elements, 175 00:10:20,370 --> 00:10:22,080 ‫and add the new element. 176 00:10:22,080 --> 00:10:24,540 ‫When we want to delete one, we use filter 177 00:10:24,540 --> 00:10:28,740 ‫because filter makes the resulting array shorter. 178 00:10:28,740 --> 00:10:33,740 ‫Then we simply keep all the book elements. 179 00:10:33,990 --> 00:10:36,660 ‫So, all the book objects where the idea is different 180 00:10:36,660 --> 00:10:38,880 ‫than the one we want to delete. 181 00:10:38,880 --> 00:10:41,190 ‫And to update, we use the map method 182 00:10:41,190 --> 00:10:44,520 ‫because the map method creates an array which has 183 00:10:44,520 --> 00:10:47,310 ‫the exact same length as the original. 184 00:10:47,310 --> 00:10:51,780 ‫And so then when we are at the ID that we're looking for 185 00:10:51,780 --> 00:10:55,470 ‫so that we want to manipulate, then we create a new object 186 00:10:55,470 --> 00:10:59,190 ‫and override the property that we want to manipulate. 187 00:10:59,190 --> 00:11:00,900 ‫And for all the other books, 188 00:11:00,900 --> 00:11:03,483 ‫we simply return the book unchanged.