Update nested object using Object.assign

Question

I have the following object. This object gets assigned a new value when the user clicks on a button.

state = {
  title: '',
  id: '',
  imageId: '',
  boarding: {
    id: '',
    test: '',
    work: {
      title: '',
      id: ''
    }
  }
}

My updated object looks like:

state = {
  title: 'My img',
  id: '1234',
  imageId: '5678-232e',
  boarding: {
    id: '0980-erf2',
    title: 'hey there',
    work: {
      title: 'my work title',
      id: '456-rt3'
    }
  }
}

Now I want to update just work object inside state and keep everything the same. I was using Object.assign() when the object was not nested but confused for nesting.

Object.assign({}, state, { work: action.work });

My action.work has the entire work object but now I want to set that to boarding but this replaces everything that is in boarding which is not what I want.

Answer 1

You should manually merge deep object properties, try following:

Object.assign({}, state, { 
  boarding: Object.assign({}, state.boarding, {
    work: action.work
  }
});

or with spread operator

{
  ...state,
  boarding: {
    ...state.boarding,
    work: action.work
  }
}

Answer 2

If merging them manually as @dhilt suggested is not an option, take a look at lodash's merge .

You can use mergeWith if you want to customise the merge behaviour, eg merge arrays instead of overriding.

Answer 3

You can use Object.assign to update nested objects, for example:

Object.assign(state.boarding, { work: action.work })

This will update the state in place with the new work properties.

Answer 4

If you just want to update work , you don't need any sort of merge. Just do

state.boarding.work = action.work;

---

Are you concerned with immutability, you can make a copy of state and then update work .

Answer 5

I can see you're using Redux. There's a great article in the docs about updating objects in an immutable way. I suggest you read it: http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

Also, people usually use libraries for this, like Immutable.js or seamless-immutable , which don't make your code that disgusting to look at :)

Answer 6

> Use JavaScript spread operator:

{ ...user, staff_information: { nid: e.target.value }