Updating the state of object of key:value (array) in React

Question

applied_filters: { title: [''], owner: [''], customer: [''] }

One of the states that I have looked like above. I tried to use setState to add value to one of the keys by doing

this.setState({
  applied_filters: [
      ...this.state.applied_filters,
      {title: [...this.state.applied_filters.title, optionItem.option]}
  ]
})

This gives me an error this.state.applied_filters is not iterable

What am I doing wrongly?

Can you post the full code? How is this rendered?

skovy
– skovy

2019-09-09 03:54:13 +00:00
Commented Sep 9, 2019 at 3:54 — skovy
– skovy, Commented Sep 9, 2019 at 3:54

skovy · Accepted Answer · 2019-09-09 03:54:59Z

2

According to your first code, applied_filters is an object: applied_filters: { title: [''], owner: [''], customer: [''] }.

However, in the setState call it's being converted to an array (not an object). Try keeping it as an object?

this.setState({
  applied_filters: {
    ...this.state.applied_filters,
    title: [...this.state.applied_filters.title, optionItem.option]
  }
});

answered Sep 9, 2019 at 3:54

skovy

5,6502 gold badges23 silver badges34 bronze badges

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

1 Comment

dance2die Over a year ago

@Dawn17 would you mark it as an answer if it has solved your issue?

Collectives™ on Stack Overflow

Updating the state of object of key:value (array) in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related