Remove an item from a nested array with React Hooks

Question

I am trying to remove an item from my state using React Hooks. I can't figure out what I am doing wrong.

My data looks as follows and I'm trying to remove individual item within the 'items' array.

const MYDATA = {
    id: '0001',
    title: 'A good title',
    items: [
      {
        itemid: 0,
        title: 'Cheddar',
        variants: [
          { id: '062518', grams: 200, price: 3.00},
          { id: '071928', grams: 400, price: 5.50},
        ]
      },
      {
        itemid: 1,
        title: 'Edam',
        variants: [
          { id: '183038', grams: 220, price: 2.50},
          { id: '194846', grams: 460, price: 4.99},
        ]
      },
      {
        itemid: 2,
        title: 'Red Leicester',
        variants: [
          { id: '293834', grams: 420, price: 4.25},
          { id: '293837', grams: 660, price: 5.99},
        ]
      }
    ]
  }

When i click on my 'Remove' button map breaks, and I think this is because my my state is malformed, but I'm not sure.

An example of the problem I face can be seen here - https://codesandbox.io/s/frosty-joliot-4wp1q?file=/src/App.js

Any help would be greatly appreciated.

Please include a [mcve] in the question description itself. Code sandbox is fine but shouldn't be needed to answer the question. — Emile Bergeron, Sep 06 '21 at 23:49
To remove an item from an array within the state, see: [How to delete an item from state array?](https://stackoverflow.com/q/36326612/1218980) — Emile Bergeron, Sep 06 '21 at 23:51
And to update a nested state property: [How to update nested state properties in React](https://stackoverflow.com/q/43040721/1218980) — Emile Bergeron, Sep 06 '21 at 23:51

score 1 · Accepted Answer · answered Sep 06 '21 at 23:50

1

Your items is embedded inside.


  const removeMyCheese = (cheeseId) => {
    console.log(cheeseId)

    setMyCheeses(prev => {
      const items = prev.items.filter(item => item.itemid !== cheeseId)
      return {
        ...prev,
        items
      }
    })

  }

Feel free to amend it whatever your logic is, i for now only delete that item.

answered Sep 06 '21 at 23:50

windmaomao

7,120
2
32
36

Please accept the answer if you believe it solved your problem. thanks. – windmaomao Sep 07 '21 at 17:50

score 0 · Answer 2 · answered Sep 06 '21 at 23:49

0

The issue is that you are executing map on an object and not an array. Hence you get the undefined error. Perhaps you intended to run the map function on myCheeses.items?

answered Sep 06 '21 at 23:49

Maurice

346
2
6

Abbasihsn · Answer 3 · 2021-09-07T00:04:29.263

-2

This problem is due to the fact that you should apply .map on an array (here in your item). You can use either:

const removeMyCheese = (cheeseId) => {
    console.log(cheeseId);
    setMyCheeses((prevState) => {
      let items = prev.items.filter(item=>item.itemid!==cheeseId);
      return {
        ...prevState,
        items
      };
    });
  };

or (it is not a good solution though => splice mutates the state in place, which is bad practice in React.)

const removeMyCheese = (cheeseId) => {
    console.log(cheeseId);
    setMyCheeses((prevState) => {
      let items = prev.items.splice(cheeseId);
      return {
        ...prevState,
        items
      };
    });
  };

edited Sep 07 '21 at 00:04

answered Sep 06 '21 at 23:56

Abbasihsn

2,075
1
7
17

1

[`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) mutates the state in place, which is bad practice in React. – Emile Bergeron Sep 06 '21 at 23:57
@EmileBergeron I did not know that, I modified the answer based on filtering and added your comment as well. thank you. – Abbasihsn Sep 07 '21 at 00:06
It's better, but I can't recommend enough _not_ to use `splice` at all in this use-case. – Emile Bergeron Sep 07 '21 at 00:09

Remove an item from a nested array with React Hooks

3 Answers3