ReactJS bind() Method - GeeksforGeeks

23 Dec, 2020
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 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
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Example 1:
App.js:JavascriptJavascriptimport 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;
Javascript
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:
npm start
Output:
Example 2: We can also use the arrow function as provided by the modern ES6.
App.js:JavascriptJavascriptimport 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;
App.js:JavascriptJavascriptimport 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;
App.js:
Javascript
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:
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
HTML Cheat Sheet - A Basic Guide to HTML
REST API (Introduction)
Difference Between PUT and PATCH Request
How to execute PHP code using command line ?
Angular CLI | Angular Project Setup