Svelte Tutorial for Beginners #7 - Inline Event Handlers

Key Takeaways

or rather than gang so in the last video we cycled through this data and we output a snippet of HTML for each person in the array using the each loop and we can see that over here everything looks fine now imagine I want to place a button on to each person and when we click on that button it deletes that person from the array of data over here and therefore when that happens we update this data it should reflect that change in the browser and re-render this list well we can do that let me first of all add the button down here and it's a button not a button and we'll say delete inside that and we need to add on a click handler to this button right because we're going to react to a user clicking it and inside here will reference a function so for example handle click but you can call the function whatever you want and then we need to create that function up here Const handle click is equal to a function like so and then in here this is where we want to delete the person from people right now how do we do this in here because right now we don't know which person to delete because we're not passing through this person into the function right here and we can't access the person over here I can demo that if I see console dot log person like so we're not going to be able to access that and if i refresh and delete something we see person is not defined so just because we're referencing a function inside this loop where we have access to person over here doesn't mean we have access to it in the handler function itself so instead what we need to do is figure out a way to pass data through into this function as a parameter or argument rather so for example you could pass through the person right here or even person ID and then we could access the ID in here but there is a problem with this and that is that we're now invoking this function automatically so as we first run this code and we output this template for each person in the array it's going to automatically invoke this function for every single person without was clicking it right because we're invoking it using these parentheses so that means it's gonna go ahead invoke this function and if we have code in here to delete that person from the array it's gonna automatically delete them straight away and we don't want that let me just demo this in action a little bit I'm going to log out the ID to the console and if I save this now we should automatically see one two three so it's running this function for each person in the array automatically and we don't want that to happen so what we could do instead is cut this one out and we could create an inline function right here let me just delete that closing button it's automatically added that in for me when I don't need it but now we have this inline function right here right and we're not invoking this function and I can demo that I can say console dot log and then say clicked me right so this is only going to now run when we click on the button because this is not being invoked we don't have parentheses on the end of it over here so it's just a reference to a function which runs when we click it now we don't get anything logged here but if I click on delete you see clicked me clicked me etc so this works but we don't just want to log that to the console instead inside here we now want to invoke this function and we can do that by saying handle click and we can pass through the person dots ID so now this is fine because now this function is wrapping this function so this is not getting automatically invoked because it sits inside a function which is not yet invoked until we click on this so now that would work let me just save this and demo it so we don't get them automatically but when we click on delete now we can see the ID of that ninja so we're now passing it through into this function and we can use that ID to go ahead and delete the person from the array now before we do that let me just get rid of this curly brace here to open up the code block of the function and this one because when we use an our function if we're just doing it all in one line like this we don't need that curly brace and closing curly brace so now let's get rid of this console lockdown here we don't need that but what we do need to do now is update this people array right here so now I could say people is equal to people so what the current value is dots filter so this is just a regular JavaScript method and it filters through the array so we can remove certain items out so what this does is take a callback function right here so let me just create this function and this function then takes in each person as we cycle through it right so the filter method cycles through the array and fires a callback function for each person and we take that person in right here so and by the way you can call this what you want you can call it a or b or whatever you want it makes sense to me to call it person and then inside here we return true or false if we return true then it keeps that person in the array if we return false then it removes that person from the array so if I now say well we'll take the person and get the ID and we'll check if that is not equal to the ID because if they're not equal then we want to keep that person in the array remember we pass through the ID of the person that we click on right here so say we pass through two it means we've clicked on this one right so we filter the array we fire a callback function for each item it checks if the ID that we clicked on is not equal to the ID we pass through if they're not equal then it will return true and we'll keep that in and that's right now if they are equal this will return false therefore it will filter that item out of the array does that make sense cool so this right here returns a new array without the filtered item and then what we're doing is updating the value of people with that filtered array we have to reassign because spelt looks for this reassignment the equal sign if you like to check that something's been updated we can't just do this right here because that is not actually going to work we're not reassigning any kind of data instead we need to explicitly reassign the data based on the results of this and then when svelt sees this reassignment and takes the value of people then it reruns to output the updated list down here so if we save this cross our fingers and test this let's try deleting Mario and boom it goes Yoshi Luigi and now there are no people to show so there we go my friends that's how we can pass through a argument to a click handler or any other kind of handler function where an event occurs we wrap it inside an inline function which is not automatically invoked when the code runs now one more thing I said that we can take in and events objects any handler when we register it right we did that before and this is no different but this time the event object doesn't go directly in here because this is now no longer the direct handler this is just a function we're invoking inside the handler which is this now so we take in the event object right here and then if you wanted to you could pass it in as an argument into this handle click function we could take it in here then as a parameter and if we wanted to use it we could so console.log e just to see that this works save it and delete and now we can see we get this event object with information about the events right here we don't need it in our case so I'm gonna get rid of it again but if you want to use it that is how you would use it pass it through to the inline function and then into your custom handler if you need it okay so that is inline functions in the next video we're going to take a look at conditionals in our template