I need to update an object nested in an array nested in an object, so far I have been successful with using useState with spread syntax:
playerState = {
resources: {
coins: 2,
...
},
availableAdventurers: 2,
hand: [],
activeCard: false,
drawDeck: [],
discardDeck: [],
playedCards: [],
destroyedCards: []
};
This was updated without problems:
let tPlayerState = {...playerState};
...
tPlayersState.discardDeck.push(card);
...
setPlayerState(tPlayerState);
But it doesn't work in this case:
let tLocations = {...locations};
tLocations[locationLevel][locationIndex].state = LOCATION_STATE.occupied;
console.log("Target location state: " + tLocations[locationLevel][locationIndex].state);
console.log("Locations copy state:");
console.log(tLocations);
While the first log returns "occupied" as expected, when I check the whole object, I see that the state was not changed:
"Target location state: occupied"
"Locations copy state:
{…}
I: (2) […]
0: Object { type: "brown location", exploreText: {…}, state: "explored", …" }
I would expect to see that the state is "occupied" in both cases as I am referencing the same object, but that is not the case - why?