Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Components React Component Patterns Optimize Performance with PureComponent

All player elements still update when I change one score

Here is my code (note: I'm not passing the player index down to the counter component because I wrote my changeScore method differently):

import React, { PureComponent } from 'react';
import Counter from './Counter';

class Player extends PureComponent {
  render() {
    console.log(this.props.name + " Rendered");
    return (
      <div className="player">
        <span className="player-name">
          <button className="remove-player" onClick={() => this.props.removePlayer(this.props.id)}></button>
          { this.props.name }
        </span>

        <Counter 
          score={this.props.score}
          changeScore={this.props.changeScore}
        />
      </div>
    );
  }
}

export default Player;

And here is the changeScore function:

  handleChangeScore = (index) => {
    //returning a function that is called by the Counter component
    return (change) => {
      //updating the score 
      this.setState(prevState => ({ score: prevState.players[index].score += change }));
    };
  }

And how I pass it to the player component:

        {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}           
          />
        )}

If anyone has any idea why this might not be working correctly for me that would be great.

Anton Escalante
Anton Escalante
1,558 Points

Were you able to figure this one?

Happening to me as well.

Omar Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Omar Gonzalez
Full Stack JavaScript Techdegree Graduate 18,444 Points

Hello, The reason there are no changes is that you are missing index={this.props.index} between score and changeScore

        <Counter 
          score={this.props.score}
          changeScore={this.props.changeScore}
        />

I hope that helps