How can I delete Multiple array items

Question

I'm using React js. I want to add an option to delete multiple items. but after deleting each item, page refreshes the props and not delete remaining items.

How can I delete Multiple items?

const onDeleteAll = arr => {
        
    arr.forEach(element => {
      const formData = {
        id:element
      }

      props.onDeleteSubmit(formData, function(){ // pass id to delete func
        console.log('deleted')
      })
    });
  }

  useEffect(() => {
    props.getPriceType(); // fetching data
  }, []);

reducer:

case DELETE_PRICE_TYPE_SUCCESS_ACTION:
          const myDeletedArray = draft.list;
          const objDeletedIndex = myDeletedArray.filter(obj => obj.id !== action.payload._id);
          draft.list = objDeletedIndex; //update data
          break;

Are you sure you're using State and not just working with completely static data? — fesieg, Jul 27 '20 at 07:51

Asutosh · Answer 1 · 2020-07-27T07:55:51.877

3

var id = 23;
var list = [{
  id: 23,
  value: "JOHN"
}, {
  id: 23,
  value: "JADE"
}, {
  id: 24,
  value: "JADE"
}, {
  id: 25,
  value: "JAMES"
}];

var indexes = [];
const templist = list.filter((item, ind) => {
  return item.id !== id
});
list = templist;
console.log(list);

First get the list of indexes which matches the items in the array to be deleted. Traverse the above list and delete the items from each array by splice operator.

edited Jul 27 '20 at 07:55

answered Jul 27 '20 at 07:46

Asutosh

1,632
2
13
21

but after deleting one item, props refresh. – kinza Jul 27 '20 at 07:47
I have added a working example which is more efficient, and not much loop. It changes the list at one shot. – Asutosh Jul 27 '20 at 07:56
1

Can use the shorter version of filter: `list.filter(item => item.id !== id)` – Emre Koc Jul 27 '20 at 08:06

dulebov.artem · Answer 2 · 2020-07-27T09:17:34.570

I think the problem is that you have multiple items to delete, but you trigger a delete action for only 1 at a time. You need to collect all the ids to delete in a list, and send that list to the action, and in reducer just filter that ids.

const onDeleteAll = arr => {

  //this just to follow your current shape of things
  //ideally you don't want to do that, just pass arr to the onDeleteSubmit

  const formData = arr.map(element => ({
      id:element
  }));

  props.onDeleteSubmit(formData, function(){
      console.log('deleted')
  })  
  
}
useEffect(() => {
  props.getPriceType(); // fetching data
}, []);

reducer:

case DELETE_PRICE_TYPE_SUCCESS_ACTION:
          const myDeletedArray = draft.list;
          const objDeletedIndex = myDeletedArray.filter(obj => 
            !action.payload.find(itemToDelete=>itemToDelete._id===obj.id)
          );
          draft.list = objDeletedIndex; //update data
          break;

How can I delete Multiple array items

2 Answers2