‫In React, many operations need
‫to be immutable so operations
‫where we do not manipulate the underlying data structure.
‫And so therefore, it's quite important
‫to know how to add element to a race,
‫how to delete elements, and also to update elements
‫all without mutating the original underlying array.
‫Now these techniques that we're going to learn here
‫are absolutely essential for React development
‫but the good news is that they always work in the same way.
‫And so if you understand here how it works,
‫then you will be well prepared for the rest of the course.
‫So as I mentioned, what we want to do here is to learn how
‫to add elements, how to delete elements,
‫and how to update elements of an array
‫without changing the original one.
‫And so once again, we are going to work
‫with our array of books.
‫So an array of objects,
‫which really is the most common thing,
‫so the most common data structure that we're going
‫to find when we work with data on the front end.
‫So let's say first add a book object to array.
‫Let's start by creating this new book object here actually.
‫So this one is going to be the number six here.
‫The titled should be
‫"Harry Potter and the Chamber of Secrets".
‫Secrets, well it's still wrong.
‫And then the author is JK Rowling.
‫So you already have one Harry Potter book in the array.
‫And so now here we add another one.
‫And in fact, we did already learn how we create a new array
‫based on an original array
‫and then adding some other element.
‫So, we talked about that right at the beginning
‫of the section when we talked about the spread operator.
‫Remember that?
‫So let's say books then after adding, let's say
‫or after add.
‫And so all we need to do is to spread all the books here
‫into this newly created array,
‫and then simply add another book, so another object.
‫And then we take a look at this right here.
‫You see that now we have six of them
‫and the last one is this one that we just created.
‫And again, we could add this also to the beginning.
‫So right here, but it's most common to simply add a new book
‫right to the end of the array.
‫So, this one was quite easy.
‫Now let's delete a book.
‫So delete a book object from array.
‫So again, this is always going to work in the exact same way
‫no matter how the objects look like.
‫Well, as long as they have an ID, which they usually have.
‫So now let's create a new array again.
‫So always new arrays.
‫We need always to not mutate anything
‫but create new arrays.
‫Now in practice, these operations would be abstracted away
‫into some functions.
‫So for example, we would create a function called add book
‫and delete book and update book instead of creating
‫all these arrays like this.
‫But of course, this is just to illustrate the idea
‫and the technique, all right?
‫So books after delete will be a new array
‫after the deleting one of the book objects.
‫So we will basically now create a new array based on books
‫after add, which we just created.
‫And now we are going to use one of our array methods.
‫And so let's together think about this.
‫So, we want to delete a book.
‫And so after deleting, the array will be shorter
‫than before and so which of the array methods
‫makes an array shorter than it was before?
‫Well, that's right.
‫It's the filter array, right?
‫So when we filter out something,
‫then the new array will be shorter.
‫So let's filter and once again, each element here is a book.
‫And so in this case, let's say we want to delete the book
‫with the ID number three.
‫And so we can say book.id is different from three.
‫And that's actually it.
‫Let's take a look at that.
‫So this one has ID two, and the next one has number four.
‫So three is no longer there.
‫Great.
‫So why did this work?
‫Well, because of what we already learned before.
‫So, whenever this condition here in the callback
‫returns a false value then that object
‫will not be in the final array.
‫So if we want to delete the book with the ID three,
‫basically what we want is to include in the final array
‫all the books where the ID is different from three, right?
‫Because again, whenever this condition here
‫is actually true, the object will end up
‫in the final filtered array.
‫And so the easiest way of thinking about this
‫is to actually write a condition
‫which does place the objects into the new array.
‫And so again, that happens whenever the book ID is different
‫than three because when it is three, we want to delete it.
‫And so yeah, that's exactly what happened here
‫as we saw here in the result.
‫Great and again, we would usually create a function
‫called delete book and then that function would receive
‫this ID here and then here we would simply use
‫that ID like this.
‫But here we're simply like manually deleting the one
‫with the ID of three.
‫So again, just to illustrate how it all works.
‫And so now let's, in the final stage, update a book object,
‫well, in the array.
‫So books, let's say after update
‫and we're going to do it on the books after delete.
‫So, it's like chaining all of this here, one after another.
‫But we're storing the intermediate result inside variables.
‫And again, let's think about what array method we need here.
‫So after updating one of the book objects,
‫the resulting array should have the exact same length
‫as before, right?
‫And so which method produces an array
‫which has the same length as before?
‫Yes, that's the map method.
‫So map is our choice whenever we want to update an object
‫that is inside an array.
‫Okay, so here we now need our turn operator because we,
‫of course, don't want to do anything for most of the books.
‫We only want to update exactly one book object
‫which is the one with the ID that we're looking for.
‫So, let's imagine we want to update the book
‫with the ID of one, then let's say book.id if it is one,
‫then return an updated object, which for now,
‫let's just write an empty object temporarily.
‫But if not, well then simply return the book as it is,
‫so without any changes.
‫And that's simply book, right?
‫So let's already look at the result here
‫just to see that something happened.
‫So again, we are trying to update the book
‫with the ID of one.
‫And so now this one here is indeed just an empty object
‫because this was the one where book ID was equal to one.
‫So it was equal to one and so therefore,
‫then what was returned from this callback function
‫was this empty object, which is what we see here.
‫But for all the other other ones,
‫it simply returned the original object.
‫So then nothing changed.
‫Now, right, but of course we don't want
‫to return this empty object but we want to return an object
‫which has an updated property.
‫And in fact, we already learned how to do that way back
‫again using the spread operator.
‫So, remember, we simply spread out the current book object
‫into this object.
‫So this newly created object.
‫So, we take basically all of the properties
‫into this new object and then we can simply overwrite
‫one of them.
‫Let's say we want pages again, 1,210.
‫Let's just do something a bit more dramatic just to see
‫the result a bit better.
‫And so yeah, now we have only one page here
‫while everything else again remains unaffected.
‫Let's put it 1,210 and there we go.
‫So we updated one property in one object of the array.
‫And this is again, something that we do all the time.
‫And so you just basically need to memorize
‫this recipe right here.
‫So when we want to add a new object to an array, we do this.
‫We create a new array, spread the current elements,
‫and add the new element.
‫When we want to delete one, we use filter
‫because filter makes the resulting array shorter.
‫Then we simply keep all the book elements.
‫So, all the book objects where the idea is different
‫than the one we want to delete.
‫And to update, we use the map method
‫because the map method creates an array which has
‫the exact same length as the original.
‫And so then when we are at the ID that we're looking for
‫so that we want to manipulate, then we create a new object
‫and override the property that we want to manipulate.
‫And for all the other books,
‫we simply return the book unchanged.