this.handleClick no parentheses?

Quick question about the syntax here. Why is it that ‘handleClick’ isn’t called with the parenthesis when using ‘this.handleClick’ but its included when defining the object properties? A little confused about this


class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    text: "Hello"
  };
  // Change code below this line
  this.handleClick = this.handleClick.bind(this)
  // Change code above this line
}
handleClick() {
  this.setState({
    text: "You clicked!"
  });
}
render() {
  return (
    <div>
      { /* Change code below this line */ }
      <button onClick = {this.handleClick}>Click Me</button>
      { /* Change code above this line */ }
      <h1>{this.state.text}</h1>
    </div>
  );
}
};

Challenge: Bind ‘this’ to a Class Method

Link to the challenge:

This code block:

handleClick() {
  this.setState({
    text: "You clicked!"
  });
}

is where you define the method, and this is just one of the ways to define a method within a class in JavaScript.

This line: this.handleClick = this.handleClick.bind(this) ensures you have the right this when you hand handleClick as a call back to the onClick, and if you did not bind this then when handleClick is invoked by onClick the this referenced in the function would be undefined.

There are other syntaxes you can use such as writing the method like

handleClick = () =>  {
  this.setState({
    text: "You clicked!"
  });
}

and using this syntax would allow you to skip the need to bind this, but this syntax is currently experimental.

If you would more info I recommend reading:

1 Like

When defining a function, whether through arrow syntax const handleClick=()=>{} or the one shown here handleClick(), the () shows the parameters the function is expected to receive, so an empty parenthesis here means it expects no input.

When calling a function, you would put parenthesis after the function name, like handleClick() which would invoke handleClick, and that parenthesis is where you would pass in parameters if it needs any, also the reason why the compiler knows this is a function call.

When pointing to a property of an object, because in this case this is what is happening, the MyComponent Class object has a property that is the function handleClick, you would omit the parenthesis to let the compiler know this is not a function call.

In this line of this.handleClick = this.handleClick.bind(this), you are telling React that when MyComponent refers to handleClick, it means the function handleClick.

In the line of <button onClick = {this.handleClick}>Click Me</button>, you are telling React to pass whatever the reference this.handleClick points to to the button as onClick event, instead of invoking the function.

You can see the difference by putting () when passing this.handleClick to the button, which instead of passing the reference results in an error.

React has some of the most insightful yet beginner friendly documentation I’ve come across. If you would like, the link posted by @caryaharper is extremely helpful.

3 Likes

Okay so in the line <button onClick = {this.handleClick}>Click Me</button>, we are not calling the handleClick() method, rather pointing to the reference this.handleClick from this.handleClick = this.handleClick.bind(this) from earlier, which binds our handleClick() method to this so it can be properly used? Is the handleClick() method then invoked?

Thank you for your detailed explanation! Even if I’m not fully understanding it yet, it really helped clear up some of the confusion

Thank you, I will check out that resource you posted! I think this is all a little confusing

onClick = {this.handleClick}> this is done because eventListeners take functions or objects, and those callbacks are invoked when the event is fired.

You got it mostly right, it does refer to the handleClick method defined in the component, without immediately executing it. It does execute the method when the button is clicked. Similar to when assign a value to a variable, through executing a function let sum=add(2,3) //sum==5 , if you were to put parenthesis to the method, it would assign to onClick the value returned by the method, not the method itself. If you write let sum=add, now the variable sum will refer to the function add and if you were to call sum(2,3) it would return 5(assuming add is designed to return the sum of two arguments). If you just call console.log(sum) it would return [Function: add]

The part where we bind this to the method is only so whenever we use this inside the handleClick method, we refer to the component itself, otherwise this inside the method body would have different meaning. The line in particular this.handleClick = this.handleClick.bind(this) is just an assignment operation. When calling it, we refer to the handleClick method, part of the component

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.