how to toggle an array of objects using react useState hook

Question

In my react app, I have multiple categories, under each categories I have multiple options. I am trying to write a function to handle toggling the selections. for example:

const initialState=[{id: "fruit", items:["apple", "banana"]}, {id: "veggie", items:["cucumber"]}]
const [selectedItems, setSelectedItems] =useState(initialState)

If I click the banana, the result should be:

[{id: "fruit", items:["apple"]}, {id: "veggie", items:["cucumber"]}]

If I click another fruit, for example, peach, the result should be:

[{id: "fruit", items:["apple", "banana", "peach"]}, {id: "veggie", items:["cucumber"]}]

If I click chicken, the result should be:

[{id: "fruit", items:["apple", "banana"]}, {id: "veggie", items:["cucumber"]}, {id: "meat", items: ["chicken"]}]

I have a toggle handler like this:

function toggle(changed: string, id: string) {
    if (selectedItems.find((cat) => cat.id === id)) {
      //toggle
    } else {
      setSelectedItems([
        ...selectedItems,
        { id: id, items: [changed] },
      ])
    }
  }

I am struggling at the toggle part to handle the existing objects. Any help? Thanks.

DevX · Accepted Answer · 2022-08-01 05:47:43Z

2

function toggle(changed: string, id: string) {
if (selectedItems.find((cat) => cat.id === id)) {

  const obj = selectedItems.find(x => x.id === id);
  const itemsToProcess = obj.items

  // exist, to remove
  if(itemsToProcess.find(x => x === changed)){
      setSelectedItems([
        // things we don't touch
        ...selectedItems.filter(x => x.id !== id),
        // filtered array 
        {id, items: [...itemsToProcess.filter(i => i !== changed)]}
  ])
  }
  // to add
  else{
    setSelectedItems([
        ...selectedItems.filter(x => x.id !== id),
        {id, items: [...itemsToProcess, changed]}
    ])
  }
} else {
  setSelectedItems([
    ...selectedItems,
    { id: id, items: [changed] },
  ])
}

}

answered Aug 1, 2022 at 5:47

DevX

5414 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

how to toggle an array of objects using react useState hook

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