How to setState in nested objects inReactJS?

Question

I am trying to setState in an object of 2 arrays. Each array has it's own object. I am trying to create new groups and rows onClick of a button. So I have an object named groups which has an array named firstGroup and then another array named secondGroup. I have a click listener handleSecondGroupwhich should add a new Row to the secondGroup. But doing a setState on the secondGroup doesn't seem to be working. Not sure how i can achieve that.

This is what my code looks like:-

this is the App.vue file

import React, {Component} from 'react';
import './App.css';
class App extends Component {
 state = {
    groups {
         firstGroup: [
             { id: 0, title: 'New Group', rows: [{ id: 0,value: 'row1', options: 
        [1,2,3,4,5]}] }
          ],
         secondGroup: [
             {id:0 , title: 'New Group', options: [1,2,3,4,5] }
          ]
      }
 }

handleSecondGroup = () => {
   const groups = [...this.state.groups.secondGroup, { id:this.state.groups.length, title: 'New Second Group', options: [1,2,3,4,5}]
    this.setState({
  groups
 })
console.log(groups)
}

  export default App;

I am not sure if this is the right way to setState in nested objects? Any help will be appreciated.

Please provide a complete valid example, it is not the right syntax. — Dennis Vash, Feb 26 '20 at 17:44
Does this answer your question? [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — Emile Bergeron, Feb 26 '20 at 18:35

score 1 · Answer 1 · answered Feb 26 '20 at 17:52

I'm not sure according to what you want to add a third group, but here is a practical example of adding an arbitrary third group:

const thirdGroup = {
  id: 3,
  title: 'New Third Group',
  options: [1]
};

class App extends Component {
  state = {...}

  handleSecondGroup = () => {
    this.setState(prevState => {
      const prevGroups = prevState.groups;
      return { groups: { ...prevGroups, thirdGroup } };
    });
  };

  render() {
    return (
      <>
        <pre>{JSON.stringify(this.state.groups, null, 2)}</pre>
        <button onClick={this.handleSecondGroup}>Add Group</button>
      </>
    );
  }
}

hlkughl · Answer 2 · 2020-02-26T18:12:25.733

You're replacing groups with the updated secondGroup only. First copy the groups object then update the nested array. And options: [1,2,3,4,5] has a missing square bracket.

handleSecondGroup = () => {
    const groups = {...this.state.groups, secondGroup: [...this.state.groups.secondGroup, { id:this.state.groups.length, title: 'New Second Group', options: [1,2,3,4,5]}]}
    this.setState({ groups })
    console.log(groups)
}

emeraldsanto · Accepted Answer · 2020-02-28T17:40:22.183

The resulting object you're trying to setState with is not structured correctly.

export default class App extends Component {
    state = {
        groups : {
            firstGroup: [
                { 
                    id: 0, 
                    title: 'New Group', 
                    rows: [
                        { 
                            id: 0,
                            value: 'row1', 
                            options: [1,2,3,4,5]
                        }
                    ] 
                }
            ],
            secondGroup: [
                {
                    id:0, 
                    title: 'New Group', 
                    options: [1,2,3,4,5] 
                }
            ]
        }
    }

    handleSecondGroup = () => {
        const groups = { ...this.state.groups };

        groups.secondGroup.push({
            id: groups.secondGroup.length, 
            title: 'New Second Group', 
            options: [1,2,3,4,5]
        });

        this.setState({ groups });
    }
}

[`.push` mutates the state.](https://stackoverflow.com/q/37755997/1218980) — Emile Bergeron, Feb 26 '20 at 18:38
It does not as we've assigned it to a local variable right before. — emeraldsanto, Feb 26 '20 at 21:07
Assigning it to a local variable does not copy anything other than the immediate value, which in this case is a reference to the `groups` object, the same that's in `this.state`. — Emile Bergeron, Feb 26 '20 at 21:13

How to setState in nested objects inReactJS?

3 Answers3