Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) React Component Patterns The React Challenge: Solution

Seokhyun Wie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points

Why getHighScore has to be passed as function in App.js?

// inside the `render()` in `App.js`
<Player
    name={player.name}
    id={player.id}
    key={player.id.toString()}
    removePlayer={this.handleRemovePlayer}
    score={player.score}
    changeScore={this.handleScoreChange}
    index={index}
    isHighScore={this.getHightScore() === player.score}
/>

Other functions such as handleRemovePlayer and handleScoreChange are passed without function declaration, (). Why the getHighScore only works when it is passed with a pair of parenthesis? Because there is no parameter?

2 Answers

Without parentheses the function is assigned

removePlayer={this.handleRemovePlayer}

With parentheses the function is invoked and the return value of the function is used. Here the return value of the getHighScore function is compared to player.score

isHighScore={this.getHighScore() === player.score}
Seokhyun Wie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points

Thanks KRIS NIKOLAISEN , the answer was simple and clear. So the concept is that if you want to use the function while passing it, you need to use parentheses to invoke; otherwise, remove it to assign and pass it down to child component. Did I get it clear enough? :)

Thanks, awesome course