JavaScript React Components Managing State and Data Flow Update State Based on a Player's Index

Is is possible to use a function that returns a function to make your code more concise?

Here is a snippet of code from my app.js file that shows what I mean

handleChangeScore = (index) => {
    return (change) => {
      console.log(change);
    };
  }

  render() {
    return (
      <div className="scoreboard">
        <Header 
          title="Scoreboard" 
          totalPlayers={this.state.players.length} 
        />

        {/* Players list */}
        {this.state.players.map((player, index) =>
          <Player 
            name={player.name}
            score={player.score}
            id={player.id}
            key={player.id.toString()} 
            changeScore={this.handleChangeScore(index)}
            removePlayer={this.handleRemovePlayer}           
          />
        )}
      </div>
    );
  }

1 Answer

yes it's possible to use a function that returns another function that's call clouser . Treehouse have a content about clouser see in javaScript library and you can also google it (js clouser);