Pushing element of an array as part of an object in React

Question

I have this class:

export default class Player {
  constructor() {
    this.scores = [];
  }

 // Insert a new score and keep top N
 insertScore = (score) => {
    this.scores.push(score);
    this.scores.sort((a, b) => b - a);
    if (this.scores.length > N) this.scores.pop();
  };
}

Which is part of a component state:

export default class Menu extends React.PureComponent {
   contructor(props){
     super(props);
     this.state = {
       player: new Player()
     }
   }

   onEndGame(score) {
     player.insertScore(score);
   }
   ...
}

Since changing arrays as part of the state it's very tricky in React (as explained in this aritcle), is the insertScore "legal" in this context?

Isaac Suarez · Accepted Answer · 2019-06-18 09:05:45Z

1

You are modifying directly a nested property of the state (this.state.player.scores) so it's not correct.

I'll try this:

Player class

insertScore = (score) => {
    this.scores.push(score);
    this.scores.sort((a, b) => b - a);
    if (this.scores.length > N) this.scores.pop();

    return this;
};

Menu class

onEndGame(score) {
    this.setState({
       player: this.state.player.insertScore(score);
    });
}

answered Jun 18, 2019 at 9:05

Isaac Suarez

845 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pushing element of an array as part of an object in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related