Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

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.

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)
  }));
}
  • 0:00

    If the handleAddPlayer function we wrote in the previous video still feels a bit

  • 0:04

    confusing, don't worry, it was confusing for me too at first.

  • 0:07

    So let's take a little time here to unpack this function,

  • 0:10

    to help drive home the logic.

  • 0:12

    Now, anytime I'm examining how a piece of code works, I like to use console.log and

  • 0:17

    remove or change parts of the code to see how it affects the program or the UI.

  • 0:22

    So if I log the spread operator that's bringing in the players

  • 0:28

    state to the console with ...this.state.players,

  • 0:33

    then submit a new player, notice how the console logs all but

  • 0:38

    the new player being added to state.

  • 0:41

    That's because the spread operator, followed by this.state.players,

  • 0:46

    represents the players in state before state was updated.

  • 0:50

    To better demonstrate,

  • 0:52

    I'll comment out the spread operator from the players array.

  • 0:56

    Over in the scoreboard, when I submit a new player, notice how the original

  • 1:01

    players disappear from the scoreboard, and we're left with just the new player.

  • 1:07

    They've also been removed from state.

  • 1:12

    And if you include the new player object first in the array and

  • 1:17

    the spread operator below the object,

  • 1:20

    notice how each new player gets added to the top of the list.

  • 1:30

    Include the spread as the first item of the array, and

  • 1:34

    new players get added to the bottom of the list.

  • 1:42

    Again, the spread operator here represents all the existing

  • 1:46

    players on the scoreboard before a new player is submitted.

  • 1:51

    With that in mind, you've learned that it's usually a good idea to update to

  • 1:55

    a new state based on the previous state.

  • 1:57

    That way we can be sure that this.state always holds the correct updated state.

  • 2:03

    So let's update setState to take a callback

  • 2:07

    function with the parameter prevState.

  • 2:11

    We'll wrap the players a rate in a return statement with curly braces.

  • 2:20

    Then replace this.state.players with prevState.players.

  • 2:27

    Again, the setState callback function is React's recommended way of updating state.

  • 2:34

    In a small and simple scoreboard app like this,

  • 2:37

    you likely won't run into state inconsistency issues.

  • 2:40

    But if at some point you have 10's or 100 player objects in state, this method

  • 2:45

    provides a better way to verify that the state did indeed update correctly.

  • 2:53

    In the teacher's notes, I have posted an example of yet

  • 2:56

    another way you might update the player state using the JavaScript concat method

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

Sign up