JavaScript React Components React Component Patterns The React Challenge: Solution

Brandon Wie
Brandon Wie
Full Stack JavaScript Techdegree Student 16,731 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?

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,172 Points

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}
Brandon Wie
Brandon Wie
Full Stack JavaScript Techdegree Student 16,731 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? :)