How To delete object Array in objects state react

Question

I want to remove the items from each of saveProducts inside each storeData object

const initialState = {
  storeData: [{
      "code": "f1",
      "name": "storage-no-1",
      "saveProducts": [{
          "code": "P1",
          "id": "1",
          "name": "product-no-1",
          "size": 20,
        },
        {
          "code": "P1",
          "id": "2",
          "name": "product-no-2",
          "size": 20,
        },
      ]
    },
    {
      "code": "f2",
      "name": "storage-no-2",
      "saveProducts": [{
          "code": "P1",
          "id": "1",
          "name": "product-no-1",
          "size": 20,
        },
        {
          "code": "P1",
          "id": "2",
          "name": "product-no-2",
          "size": 20,
        },
      ]
    },
  ]
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = initialState;
  }

  deleteItem(saveProductsId, storeCode) {
    this.setState(prevState => {
      prevState.storeData.map(store => {
        if (store.code == storeCode) {
          return {
            ...store,
            saveProducts: [
              ...store.saveProducts.filter(product => product !== saveProductsId)
            ]
          };
        } else {
          return store;
        }
      })
    })
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

You miss to return inside your setState

quirimmo
– quirimmo

2019-02-04 09:25:29 +00:00
Commented Feb 4, 2019 at 9:25 — quirimmo
– quirimmo, Commented Feb 4, 2019 at 9:25

aseferov · Accepted Answer · 2019-02-04 09:25:25Z

2

You need return new state in setState

deleteItem = (saveProductsId, storeCode) => {
    this.setState(prevState => {
        return {...prevState, storeData: prevState.storeData.map(store => {
                if (store.code == storeCode) {
                    return {
                        ...store,
                        saveProducts: [
                            ...store.saveProducts.filter(product => product !== saveProductsId)
                        ]
                    };
                } else {
                    return store;
                }
            })
        }
    })
};

answered Feb 4, 2019 at 9:25

aseferov

6,4233 gold badges20 silver badges24 bronze badges

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

Comments

Dhananjai Pai · Accepted Answer · 2019-02-04 09:25:51Z

1

You are not returning the computed result!

deleteItem(saveProductsId, storeCode) {
    this.setState(prevState => {
      return prevState.storeData.map(store => { // add return on this line
        if (store.code == storeCode) {
          return {
             ...store,
             saveProducts: [
                ...store.saveProducts.filter(product => product !== saveProductsId)
              ]
           };
         } else {
            return store;
        }
      })
    })
  };

answered Feb 4, 2019 at 9:25

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Comments

Just code · Accepted Answer · 2019-02-04 09:33:28Z

You have 2 issues in your code

1) You are not returning the new state when you are inside the state,

 this.setState(prevState => {
      return {

here you are actually returning the new state.

so, your code should look like this

this.setState(prevState => {
      return {
        ...prevState, storeData: prevState.storeData.map(store => {          
          if (store.code == storeCode) {
            return {
              ...store,
              saveProducts: [
                ...store.saveProducts.filter(product => product.id !== saveProductsId)
              ]
            };
          } else {
            return store;
          }
        })
      }
    })

2) You are comparing ...store.saveProducts.filter(product => product !== saveProductsId) here you need product.id instead of product

demo

Collectives™ on Stack Overflow

How To delete object Array in objects state react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related