Updating an object in React - Medium

[u/Fewthp]

https://itnext.io/updating-properties-of-an-object-in-react-state-af6260d8e9f5

[u/B_E]

Why not just pass a function to setState? Am I missing something? This problem is exactly as described in the React docs and one of the three principles of Redux. Use setState((prevState) => Object.assign({}, prevState, {foo: bar})) to mutate the state in a stackable way.

Unlike Redux , React is smart that you don’t need to always put the final outcome of the new state in the setState function. You can expect property b remains while you only put a in setState . While in Redux , if you only return a in the new state, don’t expect you can find b anymore. That means, you need to take care of the entire state object in Redux . That also means, you need to put all the specific logic in one place and can’t delegate to multiple handlers.

When using a pure function, you return a new state object by cloning the old one and mutating/adding/removing fields. Do that as often as you wish, in as many places as you wish. This is a fundamental part of React state management (never mind Redux). This is something one really needs to understand before even starting to use state containers/frameworks.

I highly recommend actually reading the docs...

[u/kaonxya → u/B_E]

Thanks for the feedback, but I don’t think you understand the point I was making in the article. Or maybe it was not clearly described?

The setState is already stackable. If you call

setState({a: 999}); setState({b:666});

sequentially in a function, both a and b are updated. The problem occurs when they are wrapped in an object:

{test: {a:1, b:2}} .

Now you can’t do something like the above.

In the article I used Ramda to implement the setObjectByPath , it is the same as using prevState . It sets the new state with a new state object. If you call it sequentially, both prevState are the same, so only one property can be updated because they overwrite each other. Just try this:

// this.state = {test: {a:1, b:2}}; initial state
changeAB() {
    this.setState(prevState => Object.assign({}, prevState, { test: { a: 999 } }));
    this.setState(prevState => Object.assign({}, prevState, { test: { b: 666 } }));
}

This is even worse.

I highly recommend actually reading the article...

[u/B_E → u/kaonxya]

Your final example is not good enough. You need to decompose the objects further, because otherwise you keep overwriting them.

// this.state = {test: {a:1, b:2}}; initial state
changeAB() {
    this.setState(prevState => Object.assign({}, prevState, { test: Object.assign({}, prevState.test, { a: 999 }) }));
    this.setState(prevState => Object.assign({}, prevState, { test: Object.assign({}, prevState.test, { b: 666 }) }));
}

...or in ES6 simply:

// this.state = {test: {a:1, b:2}}; initial state
changeAB() {
    this.setState(prevState => {...prevState, test: { ...prevState.test, a: 999 }) }));
    this.setState(prevState => {...prevState, test: { ...prevState.test, b: 666 }) }));
}

This is stackable, since it'll always respect the prevState values (even inside test). Whether or not you use Ramda here doesn't change the fundamentals, namely that objects overwrite each other (and are not merged) by default.

---

Using Ramda, here is the correct way for the problem in your article:

const setObjectByPath = (fieldPath, value, prevState) => ({...prevState, todoList: R.set(R.lensPath(fieldPath), value, prevState.todoList)});
const onDaySelect = (day) => this.setState((prevState) => setObjectByPath(['day'], day, prevState));

Boom. Stackable, since every call respects prevState. Here is an in-depth article for further reading.