React hooks - Remove multi items from array and update state

Question

How to delete multiple items of array and set state? I have selected multiple items from checkbox. This is the selected item [5, 4, 3] I want to remove all items in array based on id and update the state. This is my code.

const [products, setProducts] = useState();

 const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];

    selectedItems.forEach(function(p) {
      setProducts(products.filter(prd => prd.id !== p));
    });
}

Its removing only one item at time, but I selected 3 items. How to remove 3 selected items and products state? Thanks

Didn't you already ask this question a few hours ago? stackoverflow.com/questions/60299645/… — Brian Thompson
– Brian Thompson, Commented Feb 20, 2020 at 3:49
Does this answer your question? React hooks - Remove multi object from array and update state — Akhil Aravind
– Akhil Aravind, Commented Feb 20, 2020 at 3:55

Gene Sy · Accepted Answer · 2020-02-20 03:46:01Z

1

You're calling setProducts ever iteration of the loop. You have to call setProducts after you filter them so that it only triggers state change once

const [products, setProducts] = useState();

 const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];
  let newProducts;
    selectedItems.forEach(function(p) {
      newProducts = products.filter(prd => prd.id !== p);
    });
  setProducts(newProducts);
}

better yet you can filter it faster like this without looping


const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];
  const newProducts = products.filter(prd => selectedItems.indexOf(prd.id) >= 0);
  setProducts(newProducts);
}

answered Feb 20, 2020 at 3:46

Gene Sy

1,7452 gold badges13 silver badges18 bronze badges

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

1 Comment

Chervin Tanilon Over a year ago

Thanks for this, also I think you forgot to instantiate an empty array in newProducts variable, because that will become undefined

Collectives™ on Stack Overflow

React hooks - Remove multi items from array and update state

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related