Full React Tutorial #7 - Click Events

Key Takeaways

all right then so when we have a website typically there's loads of different events going on inside the website when a user browses it things like hover events or click events or form submission events keyboard events scroll events loads and loads now in this video we're just going to look at click events which is when a user clicks on something and i'm going to show you how i can react to those events by running some code so first of all let's create a button inside the home component underneath the h2 and the text is going to be click me so i want to react now to a user clicking on this button and i want to fire a function when they do that so first of all i'm going to create this function inside the home component function at the top and we'll store it in a constant which i'm going to call handle click and typically you'll see the different functions called something like this like handle click or handle mouse over or handle submit or something like that that's just a naming convention but you can call the functions whatever you want so inside this arrow function all i'm gonna do is log a message to the console and the message is gonna be hello ninjas all right so if i now save this nothing's going to happen when i click on this because i've not linked up this function to this button so it doesn't know to run that function yet let's open the console already anyway just so we can see that in a minute so then how do we hook this up well all we need to do is come to the button and say on click with a capital c and set that equal to a dynamic value so curly braces and we just pass in a function reference so whatever the function is called which is handle click now we don't invoke the function because if we were to save this then it's going to invoke this automatically without the user even clicking on it and we can see this log to the console right away we don't want to do that we don't want to invoke it we just want to set a reference to that function right here then when a user clicks on this it will invoke that function for us so let's save this i'm going to clear out the console and let's click on this and it works click again it does it again so that's how we can create a function and assign it to an element so that it fires when a user clicks on it by using this on click property right here and then passing in a function a reference so what if we want to pass in an argument to the function for example if i wanted to pass in a name well normally what we do is use parentheses and pass in the name for example yoshi right but like i said before if we do this then it's going to automatically invoke this function right away because the parentheses invoke the function so we can't do this if we want to pass in an argument instead we have to wrap this inside an anonymous function so i'm going to do another button to demo this so i'll say click me again and then up here i'm going to create another function so const and i'll call this handle click again and set it equal to an arrow function and inside here we're going to take as a parameter the name okay and i'll log that to the console so console.log and then i'll say hello and i'll concatenate the name so plus name you could use a template string if you wish i'm just using concatenation so now i want to find this function when we click on this button so again on click is equal to a dynamic value which is handle click again okay so now if we save it it's going to fire this function but we're not passing in the name here and like i said we can't pass that in directly right here because it's going to invoke that function so how do we do this well we do need to pass in the argument so let's just do that i'm going to pass in mario and then what we need to do is then wrap this inside an anonymous function so let me cut this for now and instead i'm just going to do an arrow function right here like so now this is a function which will then fire when a user clicks on this button so inside here i could just say console.log hello right and this is going to do the same thing as this we're not invoking this function right here we're just referencing it right it's an anonymous one we don't store it in a constant or anything like that we just create it directly here but we're still not invoking that and then when a user clicks on this button it's gonna fire the function so let's test this out first of all click me again and we see hello so now what we could do is inside this function we could just invoke this other function so now this is not going to be invoked straight away because it's being wrapped in an anonymous function which isn't firing to begin with so only now when we click on this button it fires this function and then invokes the other one which passes in the name so if i save this now it should work click me again hello mario awesome so that works now if i wanted to i could do this all in one line by bringing this up and bringing this up as well and we don't really need these curly braces now because it's on one line for the function so let's delete that one and this one we still keep these curly braces because this signifies a dynamic value the other ones were just for the anonymous function so this is still going to work let me save that and test again and we see hello mario awesome so that works now one more thing i want to show you is the event object or the event parameter that we automatically get access to inside these functions when an event occurs so this one right here where we just reference a function it automatically gains as the first parameter the event object and then we can do something with that event object let me just log it to the console so you can see the different information on that object if i save it and come over here and click this first button we see hello ninjas but then also this event object and we can see all of these different properties about the event if we wanted to use them now what about the other one because we don't automatically get it as a first argument inside this function because it's not being referenced as the function this one right here this anonymous function gets access to the event object automatically then if we want to use it inside our custom function we can just pass it in as an argument and it can be first or second it doesn't really matter so i can pass it in right here so i take the automatic argument from the function that wraps this and pass it into this custom function as a second argument and then i can use it inside this function so after name i could say e and then say i just want the target i could use the target property for example that was just one of the properties on this object and then if i click on this we can see we get the event target awesome so that's how we can react to click events in our components