Update the Players State Based on Previous State

3:01 with Guil Hernandez

In this video, we will update to a new state based on the previous state. That way we can be sure that this.state always holds the correct updated state.

Teacher's Notes
Video Transcript
Downloads

Resources

Update the players state using the concat() method:

handleAddPlayer = (name) => {
  let newPlayer = {
    name,
    score: 0,
    id: this.prevPlayerId += 1
  };
  this.setState( prevState => ({
    players: prevState.players.concat(newPlayer)
  }));
}

If the handleAddPlayer function we wrote in the previous video still feels a bit 0:00 confusing, don't worry, it was confusing for me too at first. 0:04 So let's take a little time here to unpack this function, 0:07 to help drive home the logic. 0:10 Now, anytime I'm examining how a piece of code works, I like to use console.log and 0:12 remove or change parts of the code to see how it affects the program or the UI. 0:17 So if I log the spread operator that's bringing in the players 0:22 state to the console with ...this.state.players, 0:28 then submit a new player, notice how the console logs all but 0:33 the new player being added to state. 0:38 That's because the spread operator, followed by this.state.players, 0:41 represents the players in state before state was updated. 0:46 To better demonstrate, 0:50 I'll comment out the spread operator from the players array. 0:52 Over in the scoreboard, when I submit a new player, notice how the original 0:56 players disappear from the scoreboard, and we're left with just the new player. 1:01 They've also been removed from state. 1:07 And if you include the new player object first in the array and 1:12 the spread operator below the object, 1:17 notice how each new player gets added to the top of the list. 1:20 Include the spread as the first item of the array, and 1:30 new players get added to the bottom of the list. 1:34 Again, the spread operator here represents all the existing 1:42 players on the scoreboard before a new player is submitted. 1:46 With that in mind, you've learned that it's usually a good idea to update to 1:51 a new state based on the previous state. 1:55 That way we can be sure that this.state always holds the correct updated state. 1:57 So let's update setState to take a callback 2:03 function with the parameter prevState. 2:07 We'll wrap the players a rate in a return statement with curly braces. 2:11 Then replace this.state.players with prevState.players. 2:20 Again, the setState callback function is React's recommended way of updating state. 2:27 In a small and simple scoreboard app like this, 2:34 you likely won't run into state inconsistency issues. 2:37 But if at some point you have 10's or 100 player objects in state, this method 2:40 provides a better way to verify that the state did indeed update correctly. 2:45 In the teacher's notes, I have posted an example of yet 2:53 another way you might update the player state using the JavaScript concat method 2:56

You need to sign up for Treehouse in order to download course files.

React Components

Update the Players State Based on Previous State

Resources