How to avoid the need for binding in ReactJS ?
Last Updated :
10 Nov, 2023
In ReactJs, when we are working with class-based components and want to access this inside a class method. This will need to bind it. Binding this allows it to access the state and setstate inside the class.
Prerequisites:
Approach to avoid binding in React JS:
To avoid the need for binding we have something introduced in ES6 as arrow functions. Using the arrow function to call this.setState will lead to avoiding the use of bind. When we use the arrow function it works because of the following reasons:
- It does not re-scope this, so we don’t need to bind this in the class constructor.
- JavaScript has first-class functions, which means functions are considered as data. Therefore, arrow functions can be assigned to class properties.
Syntax:
// With the bind method
constructor(props) {
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ clicked: true });
}// Without the bind method
handleClick = () => this.setState({ clicked: true });
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd example
Project structure:
project structureExample 1: This example implement handleClick function in a class component using the bind method.
JavaScript
// Filename - App.js
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
clicked: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ clicked: true });
}
render() {
return (
<div
style={{
backgroundColor: this.state.clicked
? "blue" : "green",
height: "100vh",
width: "100vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "50px",
fontWeight: "bold",
fontFamily: "sans-serif",
cursor: "pointer",
}}
onClick={this.handleClick}
>
Click Me!
</div>
);
}
}
Step to run the application: Run the application using the following command:
npm start
Output: In the above, class-based component we are using the bind function in handle click.
Example 2: This example implement handleClick function in a class component without using the bind method
JavaScript
// Filename - App.js
import React, { Component } from "react";
export default class App extends Component {
state = { clicked: false };
handleClick = () => this.setState({ clicked: true });
render() {
return (
<div
style={{
backgroundColor: this.state.clicked
? "blue" : "green",
height: "100vh",
width: "100vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "50px",
fontWeight: "bold",
fontFamily: "sans-serif",
cursor: "pointer",
}}
onClick={this.handleClick}
>
Click Me!
</div>
);
}
}
Step to run the application: Run the application using the following command:
npm start
Output: In the above, class-based component we are using the arrow function in handle click.
Output
Similar Reads
How to avoid binding by using arrow functions in callbacks in ReactJS? In React class-based components when we use event handler callbacks, it is very important to give special attention to the 'this' keyword. In these cases the context this is undefined when the callback function actually gets invoked that's why we have to bind the context of this. Now if binding all
2 min read
How to call function inside render in ReactJS ? In React JS, the render method is a fundamental part of a component's lifecycle. It is responsible for rendering the component's JSX markup onto the DOM. While the render method itself should primarily handle rendering JSX, there are scenarios where you may need to call a function inside the render
3 min read
How to Change Button Text on Click in ReactJS ? In this article, we will learn about diverse methods for altering button text dynamically upon clicking on the button. React, a widely embraced JavaScript library for crafting user interfaces provides several approaches to seamlessly achieve this functionality. The key lies in manipulating the compo
3 min read
How to manage global state in a React application? Global state refers to data that is accessible across multiple components in a React application. Unlike the local state, which is confined to a single component, the global state can be accessed and modified from anywhere in the component tree. In this article, we will explore the following approac
7 min read
How to set Parent State from Children Component in ReactJS? To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.Prerequisites:React JSuseState HookApproachTo set parent state from child component in React,
2 min read
How to Access child's state in React? Accessing the child state in from parent component directly is not possible. React follows unidirectional data flow where data is passed from child to parent. But we can access the child state in react with the help of ref and callback. PrerequisitesReact JSProps and StateReactJS RefHow to Access Ch
4 min read