How to use spread operator on nested javascript objects?

Question

I'm trying to update part of my redux state, which contains two objects nested inside another object. Usually when updating a javascript object immutably I would use the spread operator, then define any changes afterwards as follows:

state = {...state, property1: newvalue}

However, im unsure how to use the spread operator when i have nested objects. Here is the relevant code and my attempt:

const squadDatabase = {currentSquad: {
    0: null,
    1: null,
    2:null

    }, newAdditions: null}

export default (state=initial_squad, action)=>{

    switch(action.type){
        case ADD_PLAYER_TO_SQUAD:
            return {...state, currentSquad[action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId, newAdditions: action.payload.newSquadAdditionId}
        default:
            return initial_squad
    }
}

Does anyone have any idea how to immutably update nested javascript objects, using the spread operator or otherwise?

{...state, currentSquad: {...state['currentSquad'], [action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId}, newAdditions: action.payload.newSquadAdditionId} — Shivam Gupta
– Shivam Gupta, Commented Nov 19, 2019 at 22:20
Does this answer your question? Spread syntax for nested javascript object with dynamic properties for grouping — Heretic Monkey
– Heretic Monkey, Commented Nov 19, 2019 at 22:54

kind user · Accepted Answer · 2019-11-19 22:23:17Z

8

Basically you have to add second level of object (state) destructuring.

return {
   ...state, // first nesting level spread
   currentSquad: {
      ...this.state.currentSquad, // second nesting level spread
      currentSquad[action.payload.currentSquadMemberId]: action.payload.newSquadAdditionId, 
   },
   newAdditions: action.payload.newSquadAdditionId,
};

answered Nov 19, 2019 at 22:23

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

How to use spread operator on nested javascript objects?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related