When to use parenthesis for component method as prop

Link to exercise: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-react-part-ii/modules/wdcp-22-components-interacting/projects/random-color

When working on the Random Color Picker project, I noticed in the render() method there were two different component methods we use for the Button component, isLight() and handleClick(). Below is a snippet of the code:

    return (
      <div>
        <h1 className={this.isLight() ? 'white' : 'black'}>
          Your color is {this.formatColor(this.state.color)}!
        </h1>
        <Button 
          light={this.isLight()}
          onClick={this.handleClick}/>
      </div>
    );
  }
}

However, I was a bit confused with the fact that for the light prop, we must call the method using the parenthesis, that is, isLight() and that just using isLight (without the parenthesis) does not work. For the handleClick method, it doesn’t really matter whether I use the parenthesis or not. Why does that happen?

Hello!

When you use parentheses, you are calling a function at the time the component is rendered, and passing the result of the function to a prop.
Without the parentheses, you are passing the function itself to the component, so the child component can call it at any time in the future. In this case, handleClick will be called when the user clicks the button, not on rendering like isLight().