How can I update a state inside an array of object with Redux?

Question

My app has 2 tabs and I need to modify the content according the click in tab I have this state:

const example = {
  tabs: [
    {
      id: 111,
      title: 'Python',
      icon: '[email protected]',
      content: 'Hello World'
    },
    {
      id: 333,
      title: 'EQL',
      icon: '[email protected]',
      content: 'Hello World 2'
    }
  ]
}

and I need to change the 'content' inside of tabs. I tried this:

return {
    ...state,
    tabs: {
      ...state.tabs,
      content: 'Uhuuuul'
    }
}

But this didn't work! Could someone explain why?

Jack Bashford · Accepted Answer · 2019-03-21 23:24:33Z

1

Use map:

return {
    ...state,
    tabs: state.tabs.map(tab => ({...tab, content: "Uhuuuul"}))
}

answered Mar 21, 2019 at 23:24

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

4 Comments

Maicon Furtado Over a year ago

And how can I update only a specific tab? I tried this, but it is wrong: ``` return { ...state, tabs: state.tabs.map( tab => { if(tab.id === action.id) { ({...tab, content: action.content}) } } ) }```

kkesley Over a year ago

return { ...state, tabs: state.tabs.map( tab => tab.id === action.id ? ({...tab, content: action.content}) : tab ) }

kkesley Over a year ago

yours not working because you're not returning anything. if the arrow function has {} block, you need to use return. but if it uses ({}), it would return the object.

Maicon Furtado Over a year ago

omg! i love you, guys! hahaha thanks so much, @Jack Bashford and kkesley

Collectives™ on Stack Overflow

How can I update a state inside an array of object with Redux?

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