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.

Actually, your last code should work. But, you don't need ...this.state here since React merges other parts of your state with your new qs. — devserkan
– devserkan, Commented Apr 18, 2018 at 12:31

devserkan · Accepted Answer · 2018-04-18 12:42:51Z

3

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

edited Apr 18, 2018 at 12:42

answered Apr 18, 2018 at 12:27

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kuby Over a year ago

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

Anand Ram Over a year ago

I tried both solutions. It's not updating the state. @devserkan And Also checked without nested state(like this.state = {catName: ''}) for this also setState not working for me. FYI, I am importing react-redux in this component.

devserkan Over a year ago

Can you show us your whole component or upload it somewhere else like codesandbox.io or stackblitz.com?

Anand Ram Over a year ago

I uploaded my code here codesandbox.io/s/github/arsarvahventures/build src->components->containers -> catalog-container @devserkan

devserkan Over a year ago

It seems working, I can see catName is changing from "" to "name".

Collectives™ on Stack Overflow

Update nested setState Object - ReactJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related