When to and not to use parenthesis when calling funciton?

JavaScript
1

I am doing React: Bind ‘this’ to a Class Method challenge. Here is my code

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>
    );
  }
};

I have two questions.
Q 1) Why do we have to use this.handleClick.bind(this) ? When do we have to use it? Why do we have to do such thing with handleClick but not with state or setState. If I create more methods do I have to bind each method like in such a way?
Q 2) In the line which has this code Click Me. Why doesn’t my code works when I write this.handleClick(). I thought we needed () when calling a function? Is it just with reactjs? When do we use handleClick vs handleClick() ?
Thank you

2

Hey there,

great questions!

I think you can answer your questions by creating a small example on codesandbox with an template and play around with it.

I created one for you:

Try it out and look what will happen :slightly_smiling_face:
You can find the console at the bottom right side.