React setstate nested object issue

Question

I am not able to solve this setState second night and I'm already desperate. I have heavily nested object which I'm trying to update. In case I have multiple elements in todaysMenu and I'm trying to update state for second element whole array gets "stored" in first element of todaysMenu.

onChangeAnyValue(values, itemIndex) {
        const key = Object.keys(values.x)[0];
        const provideDate = values.date;
        this.setState(prevState => ({
            data: prevState.data.map(day => day.date === provideDate ? {
                ...day,
                todaysMenu: [{
                    ...day.todaysMenu,
                    [itemIndex]: {
                        ...day.todaysMenu[itemIndex],
                        dish: {
                            ...day.todaysMenu[itemIndex].dish,
                            [key]: values.x[key]
                        }
                    }
                }]
            } : day)
        }));
    }

In case I remove square brackets its stored as just objects.

Thank you for your time!

Jacob · Accepted Answer · 2020-06-16 23:58:53Z

1

You'll want to change:

todaysMenu: [{
  ...day.todaysMenu,
  [itemIndex]: {
    ...day.todaysMenu[itemIndex],
    dish: {
      ...day.todaysMenu[itemIndex].dish,
      [key]: values.x[key]
    }
  }
}]

...to:

todaysMenu: day.todaysMenu.map((item, index) => 
  index === itemIndex
    ? { ...item, dish: { ...item.dish, [key]: values.x[key] } }
    : item
)

What you currently have is creating an Array with one object instead of converting an Array to a modified Array.

answered Jun 16, 2020 at 23:58

Jacob

79k24 gold badges159 silver badges245 bronze badges

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

Collectives™ on Stack Overflow

React setstate nested object issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related