Full React Tutorial #13 - Functions as Props

Key Takeaways

all right then so what if i want to now allow users to delete these blogs by clicking on a button or something like that well first of all we need a button inside the blog list component for each blog that we output so let's do that below the author i'm going to come down here and create a button and i'm going to say in here delete blog and we need to give this a click event handler so on click and that's going to be equal to a function now i'm going to wrap this inside an anonymous function so that we can pass an argument into our custom function because we need to pass in eventually the id of the block that we want to delete so that we can find it in the array and delete it so i'm going to call this function handle delete and i'll make it in a second and we pass in the blog dot id remember we have access to the blog and the id property is on the block so we're passing that as an argument into this handle delete function so in here we know which blog to delete all right then so we need to create that function now but where do we create it because if we were to do it in here let me say const handle delete and set it equal to a function we're taking the id parameter and in here we want to delete that blog with that id from the blog data now the data is initialized right here this is where the state is and we don't want to directly edit the blogs prop we shouldn't do that instead what we need to do is use this method inside this component to update the state that's what we need to do so it's not a good idea to have this function defined here to edit the data instead what we want to do is have it defined inside the home component so we can interact with the data directly and then what we can do is pass this through as a prop so i could say down here create a prop called handle delete and set it equal to the handle delete function and then over here we can accept that function as a prop and we can do this we can pass in functions as props so now what happens is we're invoking this function which is defined inside the parent home component and it's going to invoke this right here and then inside this function inside this component i can use this function right here to update the state and we can remove the blog with this id so the way we're going to do this is again by using the filter method much like we saw in the last video and i'm going to create a constant in here called new blogs to store the filtered array temporarily and i'm going to take the current blogs and i'm going to use the filter method and by the way this doesn't change the original data it doesn't mutate it that remains unchanged all it does is return a new array a new filtered array based on this array right here so this filter method like before files a function for each block and each time around we take in that blog as an argument and we want to return either true or false here true if the id doesn't match this because we want to keep that in the array and false if the id does match this because then we want to remove that blog from the array okay because this is the id of the blog we want to remove all right then so i'm going to say blog dot id which is the id of the blog we're iterating is then not equal to the id so this is going to be true if the id of the blog doesn't match this and so it remains in the array and it's going to be false if the id of the blog does match this and it's filtered out of the array and then that new array is stored in new blogs so then what we want to do is use this function to say look the new value of this should be new blogs so let's do that i'm going to say set blogs and then i'm going to pass in the new blog's value and i'm going to save this so now fingers crossed this should all work i'm going to delete this one and it's removed i'm going to delete this one and it's removed awesome so this works now if we refresh we get all of that data back because remember if we're refreshing we're re-running the code and it resets the state back to its initial value but that my friends is how we can pass functions into other components as props