Why we need to bind event handlers to this ?
Last Updated :
14 Dec, 2023
In JavaScript, when using regular functions, `this` can be undefined by default. To fix this, you bind functions to a specific value for `this` to avoid errors. This applies not only in ReactJS but across JavaScript for accessing properties inside functions.
Usage of this inside a normal JS function (non-arrow function) as shown below results in an error:
TypeError:
function eventHandler(){
//a TypeError will be thrown
console.log(this);
}
Steps to Create React Application:
Step 1: Create a new React application using the following command
npx create-react-app foldername
Step 2: Moving to the project directory using the following command
cd foldername
Project Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Explanation: In the below example, the state is being updated in the event handler on clicking the button but the setState method is not being executed because this is undefined within the function. It returns a TypeError and only when the event handler.
 Below are the common ways to bind this to the event handler:
- The binding event handler in the constructor.
- The binding event handler in the render method.
Example 1: In this example, we’ll see the error and try to understand why it is happening:
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = {
text: "Sample Text"
};
}
clickHandler() {
this .setState({
text: "Geeks For Geeks"
});
}
render() {
return (
<div className= "App" >
<button
onClick={ this .clickHandler}
style={{
padding: "5px" ,
marginTop: "15px"
}}
>
Click Me
</button>
<h3 style={{ color: "green" }}>
{ this .state.text}</h3>
</div>
);
}
}
export default App;
|
Step 3: Run the development server using the following command in the terminal to view the output
npm start
Output:
Output
Example 2: In this example, we will bind the clickHandler to this in the render method using the bind( ) method of JS
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = {
text: "Sample Text"
};
}
clickHandler() {
this .setState({
text: "Geeks For Geeks"
});
}
render() {
return (
<div className= "App" >
<button
onClick={ this .clickHandler.bind( this )}
style={{
padding: "5px" ,
marginTop: "15px"
}}>
Click Me
</button>
<h3 style={{ color: "green" }}>
{ this .state.text}</h3>
</div>
);
}
}
export default App;
|
Output:
Example 3: In this example, we will bind the clickHandler to this in the constructor method of the class
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = {
text: "Hover over me" ,
color: "yellow" ,
fontColor: "black"
};
this .hover = this .hover.bind( this );
}
hover() {
this .setState({
text: "Geeks For Geeks" ,
color: "green" ,
fontColor: "white"
});
}
render() {
return (
<div
className= "App"
style={{
backgroundColor: this .state.color,
color: this .state.fontColor,
borderRadius: "120px" ,
width: "200px" ,
height: "100px" ,
textAlign: "center" ,
paddingTop: "20px" ,
fontWeight: "bold"
}}
onMouseEnter={ this .hover}>
{ this .state.text}
</div>
);
}
}
export default App;
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...