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 and the second parameter is the sequence of arguments that are passed as a parameter and are optional.
Creating 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
Example 1:
- App.js:
Javascript
import React from 'react' ;
class App extends React.Component {
state = {
name: 'GFG' ,
};
handler = (name) => {
this .setState({ name: name });
};
render() {
return (
<div>
<h1>Name:{ this .state.name}</h1>
<h1>Click here to change the name</h1>
{
}
<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:
npm start
Output:
Example 2: We can also use the arrow function as provided by the modern ES6.
-
App.js:
Javascript
import React from 'react' ;
class App extends React.Component {
state = {
name: 'GFG' ,
};
handler = (name) => {
this .setState({ name: name });
};
render() {
return (
<div>
<h1>Name:{ this .state.name}</h1>
<h1>Click here to change the name</h1>
{
}
<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:
Last Updated :
23 Dec, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...