Open In App

ReactJS bind() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 23 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads