How to update nested state properties in React

0 votes

I'm trying to organize my state by using nested property like this:

this.state = {
   someProperty: {
      flag:true
   }
}

But updating state like this,

this.setState({ someProperty.flag: false });

doesn't work. How can this be done correctly?

Jul 22, 2020 in Angular by kartik
• 37,520 points
5,966 views

1 answer to this question.

0 votes

Hello @kartik,

In order to setState for a nested object you can follow the below approach as I think setState doesn't handle nested updates.

var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})

The idea is to create a dummy object perform operations on it and then replace the component's state with the updated object

Now, the spread operator creates only one level nested copy of the object. If your state is highly nested like:

this.state = {
   someProperty: {
      someOtherProperty: {
          anotherProperty: {
             flag: true
          }
          ..
      }
      ...
   }
   ...
}

You could setState using spread operator at each level like

this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: false
            }
        }
    }
}))

However the above syntax get every ugly as the state becomes more and more nested and hence I recommend you to use immutability-helper package to update the state.

Hope it helps!!

Thank You!!

answered Jul 22, 2020 by Niroj
• 82,760 points

Related Questions In Angular

0 votes
3 answers

How to load external scripts dynamically in Angular?

Hello kartik, You can use following technique to ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,760 points
35,077 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
10,434 views
0 votes
1 answer

How to loop inside React JSX?

Hello @kartik, You're just calling JavaScript functions. You ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
373 views
0 votes
1 answer

How do I conditionally add attributes to React components?

Hello @kartik, For certain attributes, React is intelligent ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
4,195 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
1,313 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 4, 2020 in Java-Script by Niroj
• 82,760 points
228 views
0 votes
1 answer

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, You  just need to put your ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,760 points
2,256 views
0 votes
1 answer

How to perform Email Validation in Javascript?

Validation is a method to authenticate the ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,760 points
149 views
0 votes
2 answers

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,760 points
15,380 views