ReactJS remove item from state (array of objects)

Question

I am doing an E-shop template in ReactJS to practice, everything is done but I can't figure out what is the best way to remove one item from state in form of array with objects.

Here is an example of what I am trying to do:

Defining my state:

const [cartData, setCartData] = useState([])

Adding items to it:

const exampleFunction = (heading, price) => {
    setCartData([...cartData, {name: heading, price: price}])
}

All of this is working just fine so my state after adding some items looks like this:

[{name: "White T-shirt", price: "$20"}, {name: "Red T-shirt", price: "$20"}]

Now my question is, if user clicks the delete button and I pass to my delete function the name parameter, how do I remove the one item with received name? Here is what I was trying to do but it didn't really work out:

  const deleteItem = (name) => {
    var newList = []
    cartData.map(d => {
      if (d.name !== name) {
        newList.push(d.name)
      }
      return d
    })
    setCartData([])
    newList.map(item => {
      setCartData([...cartData, {name: item.name}])
    })
  }

Like I said, I must've done it wrong because this is not doing the job for me. What is the best way to go about deleting one item from state? (please don't try to repair my code if there is better/smarter solution)

Thank you!

Take a look at as an option for removing an element from your array stackoverflow.com/questions/47023975/…. — dcwither
– dcwither, Commented Nov 28, 2020 at 1:31
@simonugor You can use slice method of Javascript , it will return a new array object — MukulSharma
– MukulSharma, Commented Nov 28, 2020 at 1:48

Matthew Brooks · Accepted Answer · 2020-11-28 01:36:16Z

2

What you want is the filter array prototype method.


  const deleteItem = (name) => {
    setCartData((state) => state.filter((item) => item.name !== name))
  }

When using the current state value to update state, it's good practice to pass a callback function to setState.

answered Nov 28, 2020 at 1:36

Matthew Brooks

5712 silver badges5 bronze badges

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

Comments

yolibernal · Accepted Answer · 2020-11-28 01:40:57Z

1

This should remove the entry with the specified name from cardData:

const deleteItem = (name) => {
  const newCartData = cartData.filter((d) => d.name !== name);
  setCartData(newCartData);
};

edited Nov 28, 2020 at 1:40

answered Nov 28, 2020 at 1:35

yolibernal

364 bronze badges

Comments

Subrato Pattanaik · Accepted Answer · 2020-11-28 01:49:09Z

0

You need to use filter() method of array. According to MDN web docs, the filter() method creates a new array with all elements that pass the test implemented by the provided function.

const deleteItem = (name) => {
    const newList = cartData.filter(d => d.name !== name);
    setCartData(newList);
}

answered Nov 28, 2020 at 1:49

Subrato Pattanaik

6,1398 gold badges28 silver badges61 bronze badges

Collectives™ on Stack Overflow

ReactJS remove item from state (array of objects)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related