Update nested setState Object - ReactJS

Question

this.state = {
    qs: {catName:'',subCatName:''}
}

I have the above nested state object. In order to setState, I used the below code in componentDidUpdate.

var newQs = {...this.state.qs}
newQs.catName = 'name';
this.setState({qs: newQs});

But it does not working, still this.state.qs is empty not updated. I even tried the following one.

this.setState({...this.state, qs: {
    ...this.state.qs,
    catName: 'name'
}});

Still not works.

Answer 1

Use setState like this:

this.setState( prevState =>
    ( { qs: { ...prevState.qs, catName: 'name' } } )
)

You don't need here ...this.state since React merges other parts of your state.

Also I edited my suggestion according to @kuby's comment. React now recommends using a function with prevState instead of directly setting the state. This is because state updates may be asynchronous. So, using a function is a better approach here. If we don't use a function that does not mean always there will be problems but there could be and being in the safe side is always a better approach.

Related doc: https://reactjs.org/docs/state-and-lifecycle.html