How to modify an inner property of a nested object in Javascript using a variable reference

user_1335189 0
Viewed 97

In React, I want to set an inner property of an object stored in a state.

Suppose the following:

const myIndex = 0;
const [myobject, setmyobject] = useState({ 
  a: {
    b: [ 
      {c: 1}, 
      {c: 2} 
    ] 
  }
})

I want to modify myobject, replacing c with 3 in the first object of the b array.

So I want to do this:

setmyobject({...myobject, a.b[myIndex].c: 3});

But it gives me an error, : or , expected in the first [.

Is this forbidden?

enter image description here

reactjs javascript
3 Answers

Unfortunately, doing an immutable update like that in an object literal is a bit verbose:

setmyobject({
  ...myobject,
  a: {
    ...myobject.a,
    b: myobject.a.b.map((val, idx) => 
      idx === myIndex
        ? { ...val, c: 3 }
        : val
    )
  }
});

Libraries like lodash have some functionality you might find useful like _.set, which lets you pass in a property path. Another approach could be to deep clone the object and mutate it, but the above pattern works ok if you don't want the burden of heavy libraries.

user_1195490

I think this would be best practice: https://github.com/kolodny/immutability-helper

import update from 'immutability-helper';
const updatedMyObject = update(myObject, {
    a: {b: {[myIndex]: {c: {$set: 3}}}}
});
setmyobject(updatedMyObject);
user_137103960

I don't see any reason why do you need to do it exactly in 1 string of code. Just copy object as you do it: const obj2 = {...obj1}

and then set the property you want:

obj2.a.b[myIndex].c = 3

user_66732630
Related