How do I update a react state object correctly with a variable key?

tamasj 0
Viewed 24

I am building a simple react board game that consists of rows and columns of tiles that player 1 and 2 can be on.

I store the current location of the players in a state object playerLocation. I store the current player (whose turn it is now) in currentPlayer state.

After a click on a tile, I try to move the current player there and update playerLocation state with the movePlayer function. However instead of updating the playerLocation state object it creates an undefined key on the object. So my suspicion is that I am trying to use the variable [currentPlayer.row] incorrectly .

Can someone help me why? How can I update the state object correctly?

    const [playerLocation, setPlayerLocation] = useState({
        1: {
            row: 2,
            column: 2,
        },
        2: {
            row: 2,
            column: 2,
        },
    });

    const [currentPlayer, setCurrentPlayer] = useState(1);

// location param contains the row and column of the clicked tile

    const movePlayer = (location) => {
       setPlayerLocation({
                ...playerLocation,
                [currentPlayer.row]: location.row,
                [currentPlayer.column]: location.column,
            });
    }
react-state reactjs javascript
2 Answers

Just add the key of the player as an argument.

const movePlayer = (location, key) => {
  setPlayerLocation((previousPayerLocations) => ({
    ...previousPayerLocations,
    [key]: {
      row: location.row,
      column: location.column,
    },
  }));
};
L'amjed Bouhouch0

Your playerLocation state is keeping track of both player positions. When you update that state, you are not specifying which nested object (player number/position) you want to update. I think the way you want to update the state in your movePlayerLocation function is:

const movePlayer = (location) => {
  setPlayerLocation({
     ...playerLocation,
     [currentPlayer]: {
         row: location.row,
         column: location.column,
     }
  });
}
Avi Cohen Nehemia0
Related