How to update nested state's nested object property Reactjs?

Question

showAllPics(docid){

        console.log(docid)
        var newSelected = Object.assign({},this.state.CompetitorPhotos);

        console.log("b4-->",newSelected[docid]['display']);
        newSelected[docid]['display'] = true;
        console.log("after -->",newSelected[docid]['display'],newSelected);

        console.log(newSelected,this.state.CompetitorPhotos)

        this.setState({ CompetitorPhotos: newSelected },function(){
            console.log(newSelected,this.state.CompetitorPhotos)
        });

    }

I am trying to update 'display' property in a nested property of reactjs state. The following code fails...What am i doing wrong ..

    console.log("after -->",newSelected[docid]['display'],newSelected);
    results in "after -->",true, newSelected.docid.display remains false

Object.assign({}) does not deep copy, so you're basically mutating your state when doing newSelected[docid]['display'] = true; You could however use something like : cloneDeep from lodash in order to update your state as needed lodash.com/docs/4.17.4#cloneDeep — Daniel Andrei
– Daniel Andrei, Commented Aug 24, 2017 at 7:29

emma93 · Accepted Answer · 2017-08-24 08:18:52Z

1

You can update nested state with ... Just look at this question: react set state in for nested state

return {
    ...state,
    fetching: false,
    fetched: true
}

answered Aug 24, 2017 at 8:18

emma93

1872 silver badges13 bronze badges

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

Comments

Kristupas Repečka · Accepted Answer · 2017-08-24 08:12:04Z

0

Important thing to notice here (from https://facebook.github.io/react/docs/react-component.html#setstate):

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

answered Aug 24, 2017 at 8:12

Kristupas Repečka

7397 silver badges12 bronze badges

Comments

emma93 · Accepted Answer · 2017-08-24 09:11:11Z

0

Sorry for answering a second time. Here's an example how to update a nested store in React:

    this.setState({test: {one: 'asdasdasd'}}, () => {
        let { test } = this.state
        const second = {two: 'zwei'}
        Object.assign(test, second)
        this.setState({
            test,
        }, () => {
            console.log(this.state)
        })
    })

answered Aug 24, 2017 at 9:11

emma93

1872 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to update nested state's nested object property Reactjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related