React-JavaScript purpose of a line in the code

Question

This is a very simple question but I am in the learning process and after reading around I could not find a good explanation to this, in the code below: What is the purpose of the line:

this.buttonClicked = this.buttonClicked.bind(this);

If I comment it, the program is still working. Most likely with some side effects but I don't know them yet...

class test extends React.Component {
constructor(props){
    super(props)
    //this.buttonClicked = this.buttonClicked.bind(this);
}

buttonClicked() {
    alert("thank you!")
}

render() {
    return (
        <div>
          <h2>{this.props.text}</h2>
          <button onClick={this.buttonClicked}>click me!</button>
        </div>
    )
}

}

It binds the execution scope of the callback to the current class. So referring to this in the callback will refer to your component instance — Clive
– Clive, Commented Oct 12, 2018 at 13:16
Most likely with some side effects but I dont know them yet - try alert(this.props.text) instead. — Estus Flask
– Estus Flask, Commented Oct 12, 2018 at 13:18
You could avoid using the binding and still access this by using arrow function — Jimmy Surprenant
– Jimmy Surprenant, Commented Oct 12, 2018 at 13:19

Colin Burke · Accepted Answer · 2019-03-20 17:37:51Z

3

this.buttonClicked = this.buttonClicked.bind(this);

This line basically allows you to use this within your buttonClicked() function.

You don't notice a difference since you don't actually use this in that function.

Try something with this within buttonClicked() with the binding line commented out, and you should get an error.

To avoid needing to manually bind, you can use an arrow function, like:

buttonClicked = () => {
  // do something with `this`
}

edited Mar 20, 2019 at 17:37

answered Oct 12, 2018 at 13:15

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viswanath Lekshmanan · Accepted Answer · 2018-10-12 13:19:20Z

0

bind is used to bind the context. Explanation is already given in other answers.

you can use the following syntax instead of the commented line

onClick={this.buttonClicked.bind(this)}

answered Oct 12, 2018 at 13:19

Viswanath Lekshmanan

10.1k2 gold badges43 silver badges64 bronze badges

1 Comment

Parnab Sanyal Over a year ago

Note: This creates a new function in every render.

Collectives™ on Stack Overflow

React-JavaScript purpose of a line in the code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related