‫Let's now make our application feature complete
‫by adding a button to clear up the entire list at once.
‫And so, to do that, let's come down here,
‫and after the select,
‫we're going to add a simple button.
‫So, not like that,
‫but button, "Clear list."
‫So there it is.
‫And now, as always,
‫we need to add the onClick event handler,
‫and then we need a function
‫that basically deletes all of these elements here at once.
‫Now, I think that this might be a nice challenge for you,
‫so creating that function that deletes everything,
‫and then passing that function down to this component
‫and adding it here onto the button.
‫So that shouldn't be all too hard.
‫And so, please go ahead and pause the video right now.
‫So try this on your own really,
‫as this is a really nice learning experience.
‫And then I see you back here in a minute, or five,
‫once you are finished with that task.
‫Okay.
‫So, I will create a function
‫close to all the other functions.
‫So we have handleAddItems, Delete, and Toggle.
‫And so, we simply add just another one.
‫So handleClearList,
‫which doesn't need anything really.
‫And then, all we need to do here
‫is to simply say,
‫"Set items back to the original value,"
‫which was of course this empty array.
‫And that's it.
‫So that's almost too simple.
‫But now we just need to connect this function to the button.
‫So, that button is in the packing list.
‫So that's where we pass this into a prop.
‫So onClearList
‫will be handleClearList.
‫And so now let's get that.
‫So this packing list really receives a lot of props.
‫And,
‫so then here,
‫the onClick prop.
‫And here we don't even need to create a new function.
‫All we have to do is to pass this one in.
‫So onClearList.
‫Give it a save, and that should be it.
‫So clear list and yes, everything is gone.
‫Great.
‫So, I'm hoping that you did this as well.
‫And now just one more thing here,
‫is that here in this demo app,
‫is that here we prevent the user
‫from accidentally deleting everything.
‫So here, when they click on clear list,
‫first we get if we want to delete all the items,
‫and only then if we click on okay,
‫everything will get deleted.
‫So you see, now it is empty.
‫So let's quickly do the same thing here.
‫And that's pretty easy
‫because that's just a standard dumb function.
‫So that's a function that's not really part of JavaScript,
‫but it's part of the web API.
‫But anyway, here we can create some variable.
‫Let's say confirmed.
‫And then that confirmed will be defined
‫by window.confirm.
‫So here we can then pass in any string.
‫So that's going to be the the message
‫that the user will see.
‫So "Are you sure you want to delete all items?"
‫And then when the user clicks on "Okay"
‫confirmed will become true,
‫and in the case they click "Cancel,"
‫then it will be false.
‫And so now we can do this conditionally.
‫So we just say if confirmed
‫then set items to the empty array.
‫Just to make sure, let's reload
‫and shorts and a charger,
‫and now when I clear the list,
‫then, yes, we got to confirm and it works beautifully.
‫Now maybe you got a little bit annoyed
‫at all the scrolling that we had to do here now lately
‫because our components were getting bigger and bigger.
‫So whenever we wanted like to pass in something here
‫then we had to scroll all the way down here
‫to then accept, for example, these props right here.
‫And so that's why I said
‫in the very beginning
‫that in real world applications
‫we usually have one component per file.
‫And so in the next lecture I will show you a trick
‫of how we can basically divide this one file
‫into multiple files.
‫So one file per component.