Updating the array object in React state using immutability helper

Question

I am updating an object within an array in React state using immutability helper.

The object I want to modify is nested:

this.state = {   a: {     b: [{ c: '', d: ''}, ...]   } }  

I want to update the prop c within the nth element of b using immutability helper.

The equivalent code without the immutability helper is:

const newState = Object.assign({}, this.state); newState.a = Object.assign({}, newState.a); newState.a.b = newState.a.b.slice(); newState.a.b[n] = Object.assign({}, newState.a.b[n]); newState.a.b[n].c = 'new value'; this.setState({ newState }); 

I know the above code is a bit ugly. I am assuming the code using immutability helper will solve my problem. Thanks

Answer 1

One way to do it would be using $set

let index = 0; let newState = update(this.state, {    a: {      b: {       [index]: {                c: { $set: "new value"}        }     }   } }); this.setState(newState); 

jsfiddle

Answer 2

Im importing update from immutability helper here :)

this.state = {   a: {     b: [{ c: '', d: ''}, ...]   } }    this.setState((prevState, props) => update(prevState, {     a: {         b: {             $apply: b => b.map((item, ii) => {                 if(ii !== n) return item;                 return {                     ...item,                     c: 'new value'                 }             })         }     } }))