ReactJS Tutorial - 14 - Binding Event Handlers

in this video let's learn how to bind event handlers in react components before we begin let me tell you that the reason we bind event handlers in react is purely because of the way this keyword works in JavaScript it is not because of how react works I will give you a very simple example in the context of react components to help you understand why event binding is required but my recommendation here for you is to go through this keyword and how the value of this keyword is determined in JavaScript this video will make much more sense to you once you're comfortable with the basics of this keyword in JavaScript alright let's get started what I want to achieve in this video is on the click of a button we simply change a message which is part of the component state so first I am going to create a new file called event mind dot J s within the file I will use the react snippet RC e to create a class component I will remove the named export and include the component in the app component for the JSX I will simply add a button that says click now if I save the file and take a look at the browser you should be able to see the button click Next let's create a state property called message and bind it to the user interface so in the component I am going to add a constructor using the snippet R Const within the constructor a call to super and a state property called message initialized to hello now in the render method a div tag with the content this dot state dot message if we save the file and take a look at the browser you should be able to see the message hello now let's change this message to goodbye when the user clicks on the button we're collecting from the last video we add the on click attribute and then we pass in the event handler within curly braces this dot click handler and let's define the method right after the constructor click handler and to change state we need to use the set state method this dot said state and we want to set the message to goodbye if I save this and go back to the browser and click on the button you can see that our application breaks and if you take a closer look at the error it says cannot read property set state of undefined so let me go back to vs code and comment out the set state method and instead simply log to the console that this keyword now if we go back to the browser and click on the button you can see that undefined is logged in the console so this keyword within our event handler is undefined and let me tell you this is the typical behavior in JavaScript I won't go into the details of why it is undefined though that is JavaScript related and not react specific please do spend a few minutes reading up on this keyword if you want to understand why the value is undefined but what I want you to ultimately keep in mind is this keyword is undefined in an event handler and that is the reason event binding is necessary in react class components now there are a number of ways to bind event handlers in react when you go through articles or blog posts or other videos you might find all different variants of binding the event handlers so in this video I will go over all of them the first option we have is to use the bind keyword and bind the handler in the render method so on click this dot click handler dot bind and we pass in this keyword now let me also uncomment set state let's save the file and go back to the browser now when I click on the button you can see that the set state method works without any errors the message now reads goodbye and this keyword as you can see in the console is not undefined anymore it refers to the event bind component instance although this option works perfectly fine every update to the state will cause the component to rerender this in turn will generate a brand new event handler on every render although the impact on performance is not severe in small applications it could be troublesome in large applications and components that contain nested children components so approach one binding in the render method the second approach is to use arrow functions in the render method so let me comment out the first approach and show you the second one the arrow function approach is simply calling the event handler in the arrow function body so on click and within curly braces we are going to have an arrow function empty parentheses fat arrow syntax and then the event handler this dot click handler notice that we don't need curly braces or the return keyword for the arrow function body and that is because the function body is a single statement also you can notice that we are calling the event handler and returning that value that is why parentheses is required in this approach if I now save the file and take a look at the browser clear the console and click on the button you can see that the message changes from hello to goodbye so the second approach also works as expected but similar to the first approach this also has performance implications in some scenarios if you can recollect this is the approach we use in the previous few videos so second approach is using arrow functions in the render method next let's discuss approach number three and this is the approach you are going to see in most of the cases and it is also the approach in the official react documentation this approach deals with binding the event handler in the constructor as opposed to binding in the render method so in the constructor we simply add a line this dot click handler is equal to this dot click handler dot bind and passing the disk keyword and in the render method we can go back to this dot click handler save the file go back to the browser here the console and click on the button you should be able to see the message change from hello to goodbye so that is the third approach binding in the class constructor because the binding happens once in the constructor this is better compared to binding in the render method so approach number three binding in the constructor the final approach is to use an arrow function as a class property basically change the way you define your method in the class let me comment out the binding in the constructor the existing click Handler and now define it with the new approach click handler is going to be equal to an arrow function and within the other function this dot set state message set to goodbye if you save the file and take a look at the browser you can see that the message changes on button click this keyword has the expected value within the handler method so those are the four approaches binding in render arrow function in render binding in the class constructor and finally class property as arrow functions the first approach is something you might not want to use because of performance implications the second approach although is similar to approach number one is probably the easiest way to pass parameters if your code doesn't involve three rendering nested children components this approach is still a viable option react documentation suggests either approach number three or approach number four as approach number four is still an experimental feature approach number three which is binding in the constructor is your best option right now however create react app dust support the class property approach so there is nothing wrong with using approach number four in fact when the class property approach becomes an accepted feature it would probably be the go-to approach I will try to stick to approach number three or four for most parts in this series and when we need to pass parameters I might resort to approach number two for its simplicity so there you go the four different ways to bind event handlers in react thank you guys for watching don't feel substantial

Channel: Codevolution

Views: 302,186

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Event Handlers, Binding Events, Binding Event Handlers

Id: kVWpBtRjkCk

Length: 11min 56sec (716 seconds)

Published: Mon Dec 03 2018