add item into specific list array redux

Question

I know there is a lot of similar threads but I didn't find a solution there.

Okay so I have a state which looks:

[
{
    id: 1,
    title: 'todo',
    items: [
        {
            itemID: 1,
            itemText: 'finish this project'
        },
        {
            itemID: 2,
            itemText: 'take trash out'
        },
        {
            itemID: 3,
            itemText: 'sleep'
        },

    ]
},
{
    id: 2,
    title: 'doing now',
    items: [
        {
            itemID: 1,
            itemText: 'add redux'
        },
        {
            itemID: 2,
            itemText: 'fixing bugs'
        },
    ]
},
{
    id: 3,
    title: 'done',
    items: [
        {
            itemID: 1,
            itemText: 'add components'
        },
        {
            itemID: 2,
            itemText: 'add material ui'
        },
    ]
}

]

and I have a redux reducer that should add an item into specific list, I have id of that list, and itemText which I should add. I managed somehow to make it kinda work, it is adding item into specifin array but problem is that also creates new blank list. Here is how reducer looks:

case "ADD_ITEM":
  return [
    state.map((list)=>(
    (list.id === action.payload.id) ?  list.items.push({
      itemID: 89,
      itemText: action.payload.description
    }) : list
    
  ))
  ]

Any idea how to add an item to specific list items without creating a new list?

Ori Drori · Accepted Answer · 2021-03-28 14:02:50Z

2

Map and return the lists (state), and use spread syntax to update the items:

case "ADD_ITEM":
  return state.map(list =>
    list.id === action.payload.id ? {
      ...list,
      items: [
        ...list.items,
        {
          itemID: 89,
          itemText: action.payload.description
        }
      ]
    } : list
  )

answered Mar 28, 2021 at 14:02

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

3 Comments

Marko B. Over a year ago

Exactly what I was looking for, thank you!

Marko B. Over a year ago

Sorry for bothering again but I got stuck again haha, now I m trying to remove item, this is how I m doing it but nothing is happening ``` case "REMOVE_ITEM": return state.map((list) => list.id === action.payload.listID ? { ...list, items: list.items.filter(item => item.itemID !== action.payload.itemID) } : list) ```

Ori Drori Over a year ago

To remove items use filter instead of map, and keep all items which id is no identical to the one you wish to remove.

Endothermic_Dragon · Accepted Answer · 2021-03-28 14:06:14Z

0

Try this:

case "ADD_ITEM":
    state.forEach((list, index)=>(
    if (list.id === action.payload.id){
      state[index].items.push({
        itemID: 89,
        itemText: action.payload.description
      }
    })
    
  ))

Note that this is pseudocode, but it should still work.

Your example was not working because you were returning a new array, which had (about) the same structure as state, except with the added element. To add it, simply add it directly to state without using map + return, thereby not creating a new array.

edited Mar 28, 2021 at 14:06

answered Mar 28, 2021 at 14:00

Endothermic_Dragon

1,1776 silver badges13 bronze badges

1 Comment

Marko B. Over a year ago

Thanks for explaining now I understand why it worked in that way, anyway Ori's answer is what I was looking for.

Collectives™ on Stack Overflow

add item into specific list array redux

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related