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:
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); //initial state this .state = { text: "Click Me!" , color: "lightblue" }; } //updating the state clickHandler() { this .setState({ text: "Beginner For Beginner" , color: "lightpink" }); } //calling the clickHandler using an arrow function 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:
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); // Initial state this .state = { text: "Enter input in the box!" }; // Updating state within event // handler (as an arrow function) 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:
Contact Us