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 Optimize Performance with PureComponent

Posted by liamthornback2
liamthornback2
9,618 Points

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
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
Omar Gonzalez
.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