set state array with nested array values from object

Question

I initialize component state with the store state which pulls api data. I filter the array of data by object name. This then will setState with the object chosen by the user via a button. This works, all objects change without issue. The problem I cannot for the life of me figure out is what I want is to setState onClick with a nested array of objects associated with the category. So each category object has a nested subCategory array which holds many subCategories.

So a generic example would be:

const arr = [
 { name: 'Do', id: 1, sub: [{sub_id: 1, something: 'dog'}, {sub_id: 1, something: 'cat'}] },
 { name: 'Re', id: 2, sub: [{sub_id: 2, something: 'bird'}, {sub_id: 2, something: 'mouse'}] },
 { name: 'Me', id: 3, sub: [{sub_id: 3, something: 'lion'}, {sub_id: 3, something: 'moose'}] }
];
class BrainFart extends Component {
    constructor(props) {
       super(props)
       this.state = { foo: [] }
    }
    handleArray() {
      const stuff = arr.filter(c => c.sub)
      this.setState({foo: stuff})
    }

}

This will not set state with the nested array of sub... Any thoughts? Thank you

To quote the push() doc: The push() method adds one or more elements to the end of an array and returns the new length of the array. — user5734311
– user5734311, Commented Mar 7, 2018 at 18:40
after your last edit, what's your desired output? you expect your three arr items in state.foo? or want the six (total items when combining all the sub arrays)? — Carloluis
– Carloluis, Commented Mar 7, 2018 at 19:09

Carloluis · Accepted Answer · 2018-03-07 18:56:21Z

4

Update your handleArray function to:

handleArray() {
    const stuff = arr.filter(c => c.sub);

    this.setState({ foo: [...this.state.foo, ...stuff] });
}

Note the change when setting new value for foo property on component state. In this case we create a new array based on the previous and new data (stuff).

Read more on react docs about how to modify component state.

Current problem is setting foo to the output of foo.push(stuff).

The push() method adds one or more elements to the end of an array and returns the new length of the array.

4 Comments

Shawn Sheehan Over a year ago

I ended up taking your answer and because of Flow had to process slightly different. const stuff = selected.filter(b => b)[0].sub this.setState({foo: stuff}) works great. Thank you

Carloluis Over a year ago

Ok. Feel free to mark/accept the answer. Question based on your comment: Is it fine for you to keep only the first sub array, or the final intention is to get an array with all the items on all sub arrays?

Shawn Sheehan Over a year ago

I would like to do both actually but can only figure out how to get one sub array at a time on click. In a perfect situation I would like to display every single item from all of the sub arrays for each category then filter through them as user clicks on tag

Carloluis Over a year ago

You can achieve that using array.reduce to flatten all sub arrays.

Collectives™ on Stack Overflow

set state array with nested array values from object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related