Skip to content
Related Articles

Related Articles

ReactJS bind() Method
  • Last Updated : 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 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :