vijayst vijayst - 1 month ago 11
React JSX Question

Updating the array object in React state using immutability helper

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

QoP QoP
Answer

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

Comments