Random Color Picker

Hello Codecademy Students,

My question is why in the Random.js file, in the render method, where we have this line,

<Button light={this.isLight()} onClick={this.handleClick} />

…isLight() has parentheses and handleClick() doesn’t? The methods are similar in format, except that isLight() has a return statement, but handleClick() doesn’t. Is that the reason?

I was hoping that Matt the developer from Ohio would cover this but he didn’t. Any ideas please? Thanks a lot.

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-components-interacting-u/projects/random-color

Hello, and welcome back to the forums

this.isLight() is invoking the method so that the value of true or false is returned and passed to the component. It’s called immediately when it has the parenthesis like this.

On the other hand, this.handleClick does not invoke the method. It’s attaching it to the onClick event so that it can be called later when it’s clicked, rather than being called immediately like this.isLight(). If you had included the parenthesis, then it would have been called immediately and future clicks would not work.

2 Likes

Hi, thanks a lot for explaining that so quickly!