‫So we just learned what
‫Child-To-Parent Communication means.
‫And so let's now do some more of it
‫in order to delete items from our list.
‫So the idea here is that whenever we click
‫on one of these crosses here next to an item,
‫it will then delete the item from the state
‫and therefore from the user interface.
‫Now since this click here will happen
‫inside the item component...
‫So remember each of them is actually an item component.
‫And so the click to delete,
‫so on each of these crosses,
‫will happen inside of the item.
‫But the state actually lives in the app.
‫So in the parent component.
‫And therefore this is another case
‫of Child-To-Parent Communication.
‫So let's now go back here to our app
‫which is where our state lives.
‫And then all we're going to do is to create
‫a new function right here called handleDeleteItem.
‫Now, in order to delete an item, we need to know
‫which item it actually is that should be deleted.
‫So in order to do that...
‫So to tell this function which item it is,
‫we will pass in the ID whenever we later call dysfunction.
‫So remember that each of these items here has an ID,
‫and so we can then use that ID to remove
‫the corresponding object from the items array.
‫Now about the delete operation itself,
‫we will of course delete the item from the user
‫interface by updating state.
‫So we call setItems.
‫And now here in setItems, we need the new array
‫after the item has been deleted.
‫Now once again this new items array
‫will be based on the current one.
‫And so we need a callback function which receives
‫the current item as its input.
‫And so now let's say items.filter
‫which will loop over the array and in each iteration
‫it will get access to the items object.
‫And so now, basically, all we want to do is to filter out
‫the item that has the ID that we got here, right?
‫So item.id is different from the ID.
‫So the ID that we pass in.
‫So whenever this condition here is true,
‫the item will end up in the new array.
‫So of the array of the items that have not been deleted.
‫But when this is false, so when item.id is equal the ID,
‫then that element will no longer be part of the final array.
‫And so that's how we remove,
‫so how we delete elements from arrays.
‫And once again, if this is strange, please go back
‫to the section where I review essential JavaScript concepts.
‫So there I teach in detail about how this works.
‫And now all we have to do is to call dysfunction
‫whenever the click here happens.
‫So how do we get that there?
‫Well, we now need to pass the function
‫as a prop also into the packing list.
‫So into the packing list
‫because the items are called inside the packing list.
‫So onDeleteItem,
‫and so I'm using the same naming convention
‫as before where I call the prop on the lead item
‫and then pass in the function, handleDeleteItem.
‫And so now let's receive this prop here
‫inside the packing list.
‫So we already have items.
‫So let's add this one here to the list.
‫And again, this is so helpful because
‫now we know immediately what props
‫the packing list will receive.
‫And then remember that the click
‫actually happens here on this button.
‫So inside the item component.
‫And so here we also will need access to this prop.
‫Therefore we now need to pass it in
‫along the item right here.
‫So onDeleteItem = onDeleteItem.
‫And so we're basically passing now this prop
‫through the packing list into the item.
‫So it moves here from app to packing list
‫and then to each of these items.
‫So packing list itself doesn't really need it,
‫but of course, this is the only place
‫where we can receive it.
‫Because we cannot pass it directly from app to item, right?
‫So that would not be possible.
‫Okay. And now here
‫we use the onClick prop
‫and then we specify or handler function.
‫Now if we do just this, onDeleteItem,
‫then this is not going to work.
‫So let's see why.
‫So let's test this here.
‫And so you see that nothing happens.
‫So we can see that here also in app
‫when we try to log the ID.
‫And so now you will see that, well nothing happens.
‫Because what we get in here instead of an ID, is this event.
‫So what's going on here?
‫Well, when we simply specify the function here like this,
‫then React will call the function as the event happens,
‫and it does so by passing in the event object.
‫So we actually used this to our advantage in the form,
‫so right here where we then received the event.
‫But right now we do not want to receive the event,
‫but instead the ID of the current item.
‫And so we need to create a new function here,
‫and then we pass in the current ID.
‫So item.id.
‫And once more, it's really important
‫that you don't forget this.
‫Because otherwise React
‫will just immediately call the function
‫which is not what we want.
‫We want a function here really, so that React
‫can then call this function only when the event happens.
‫And this is actually it.
‫So this should do the job.
‫Let's see.
‫And beautiful.
‫So that's gone.
‫You see here also the ID that we locked to the console.
‫And so it was based on that ID that the new
‫items array was set.
‫So the state was updated,
‫which forced React to rerender the component,
‫or in other words, to rerender the component's view,
‫so to be a bit more specific.
‫So let's try that again.
‫And yeah, then we cleaned everything.
‫Now, let's also since we're already here,
‫get rid of these initial items
‫because now we are getting this ESLint warning
‫that this is never used.
‫So again, really helpful here from ESLint.
‫And yeah, just by the way,
‫we could of course also have used
‫these initial items here as our initial state.
‫And so then whenever we would reload,
‫well, not this.
‫So whenever we would reload here,
‫then we would get these three as a default.
‫So they would then get added into our state
‫and then everything would work the same.
‫So we could also delete them here and as we reloaded,
‫then they would be back.
‫But that's not what we want.
‫So let's just get rid of all this.
‫Beautiful.
‫And now all we have to do here for the final operation
‫is to implement this functionality.
‫So where we click here,
‫and then it will mark the item as packed.
‫So that's going to be our topic for the next lecture.