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 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 {
    // 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.

1. 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: