ReactJS bind() Method

The bind() is an inbuilt method in React that is used to pass the data as an argument to the function of a class based component.

Syntax:

this.function.bind(this,[arg1...]);

Parameter:

It accepts two parameters, the first parameter is the

• this: keyword used for binding
• [arg1...]: the sequence of arguments that are passed as a parameter and are optional.

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example 1: This example uses the bind method to pass the argument "GeeksForGeeks" to the handler function while ensuring it still has the correct this context.

// Filename - App.js

import React from "react";
class App extends React.Component {
	// Initialising state
	state = {
		name: "GFG"
	};

	handler = (name) => {
		// Changing the state
		this.setState({ name: name });
	};

	render() {
		return (
			<div>
				<h1>Name:{this.state.name}</h1>
				<h1>Click here to change the name</h1>

				{/* Passing the name as an argument 
					to the handler() function */}

				<button onClick={this.handler.bind(this, "GeeksForGeeks")}>
					Click Here
				</button>
			</div>
		);
	}
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

The forceUpdate() method is useful for forcing a component to re-render.

npm start

Output:

Example 2: This example uses the modern ES6 arrow function in the onClick event to directly pass the argument "GeeksForGeeks" to the handler function, eliminating the need for the bind method.

// Filename - App.js

import React from "react";
class App extends React.Component {
	// Initialising state
	state = {
		name: "GFG"
	};

	handler = (name) => {
		// Changing the state
		this.setState({ name: name });
	};

	render() {
		return (
			<div>
				<h1>Name:{this.state.name}</h1>
				<h1>Click here to change the name</h1>

				{/* Passing the name as an argument
					to the handler() function 
					with modern ES6 feature*/}

				<button onClick={() => this.handler("GeeksForGeeks")}>
					Click Here
				</button>
			</div>
		);
	}
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: