What’s an alternative way to avoid having to bind to this in event callback methods ?
In React class-based components, accessing `this` within a method or event callback necessitates explicit binding to enable state manipulation with `setState`. Without binding, accessing `this` in such contexts leads to a TypeError due to its default undefined value within class methods.
Usually, binding this with the event callback is done by:
- binding it in the class constructor.
- binding it in the render method.
Approach: In modern JS i.e. ES6, there’s an alternative way to avoid having to bind this to event callbacks and that is using arrow functions. Due to certain properties of arrow functions, this can be accessed within the class methods or event callbacks without using bind(). This is because:
- Arrow functions use lexical scoping i.e. it binds this automatically to the scope in which the function is defined
- In JS, functions are also considered data so they can be assigned to a class property. Thus, the event callback method can be assigned as an arrow function to a class property.
Steps to Create the React Application
Step 1: Create a new react application ‘binding’ using the following command
npx create-react-app binding
Step 2: Move into the root project directory using the following command
cd binding
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",
}
Example 1: In this example, we will call the event callback method using an arrow function.
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = { text: "Click Me!" , color: "lightblue" };
}
clickHandler() {
this .setState({ text: "Geeks For Geeks" , color: "lightpink" });
}
render() {
return (
<>
<h3>Alternative this binding</h3>
<div className= "App"
onClick={() => this .clickHandler()}
style={{
backgroundColor: this .state.color,
textAlign: "center" ,
padding: '10px' ,
width: '200px' ,
height: '200px'
}}>
{ this .state.text}
</div>
</>
);
}
}
export default App;
|
Step to run the application: Run the application using the following command in the terminal to view the output:
npm start
Output:
updating the state on click
Example 2: In this example, we will assign the event callback to a class property as an arrow function.
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = { text: "Enter input in the box!" };
this .handleChange = (event) => {
this .setState({ text: event.target.value });
}
}
render() {
return (
<>
<h3>onChange Event</h3>
<input onChange={ this .handleChange} />
<p style={{
padding: "5px" ,
color: "green" }}>
{ this .state.text}</p>
</>
);
}
}
export default App;
|
Step to run the application: Run the application using the following command in the terminal to view the output:
npm start
Output:
updating the state on change in input
Last Updated :
22 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...