React remove object from list of objects without unique value, using hooks

Question

I want to remove object from my list by clicking on delete icon, but with my logic either everything is deleted from list or nothing, I am not sure how to do it without provided ID to object, I don't have anything unique and I am kinda lost. Component that renders as many Food as there is in useState:

 {cartFood.map((food) => {
    return (
      <CartFood
         key={Math.random()}
         foodName={food.foodName}
         foodPrice={food.foodPrice}
         numberOfPortions={food.numberOfPortions}
         cartFood={cartFood}
         setCartFood={setCartFood}
      />
    );
 })}

Logic for removing that particular item that is selected (which is not working and also bad solution since there can be case where you get same name and price twice)

const CartFood = ({
  foodName,
  foodPrice,
  numberOfPortions,
  cartFood,
  setCartFood,
}) => {
  const handleRemoveFood = () => {
    setCartFood(
      cartFood.filter(
        (el) =>
          el.foodName &&
          el.foodPrice !== cartFood.foodName &&
          cartFood.foodPrice
      )
    );
  };

  return (
    <div className='cartFood-container'>
      <p>{foodName}</p>
      <p>x{numberOfPortions}</p>
      <p>{foodPrice}kn</p>
      <p>
        <MdDeleteForever
          className='cartFood__icon'
          onClick={handleRemoveFood}
        />
      </p>
    </div>
  );
};

export default CartFood;

List of objects looks like this:

[{
  foodName: "Njoki with sos"
  foodPrice: 35
  numberOfPortions: 1
}, 
{
  foodName: "Chicken Wingos"
  foodPrice: 45
  numberOfPortions: 2
}]

You think of this const [cartFood, setCartFood] = useState([]); or something else? — Matej
– Matej, Commented Oct 6, 2020 at 14:52
As long as your list items aren't overly large and your list is very long, you can also just compare the list items as string: cartFood.filter((el) => JSON.stringify(el) !== JSON.stringify(cartFood)) — Jan-Philipp Marks
– Jan-Philipp Marks, Commented Oct 6, 2020 at 15:00

Prateek Thapa · Accepted Answer · 2020-10-06 15:03:05Z

3

Put the index of the item in the array as the id. Pass it as your id.

 {cartFood.map((food, index) => {
              return (
                <CartFood
                  key={index}
                  id={index}
                  foodName={food.foodName}
                  foodPrice={food.foodPrice}
                  numberOfPortions={food.numberOfPortions}
                  cartFood={cartFood}
                  setCartFood={setCartFood}
                />
              );
            })}

Use the id to remove the food.

const CartFood = ({
  foodName,
  foodPrice,
  numberOfPortions,
  cartFood,
  setCartFood,
  id,
}) => {
  const handleRemoveFood = () => {
    setCartFood(cartFood.filter((el) => el.id !== id));
  };

  return (
    <div className='cartFood-container'>
      <p>{foodName}</p>
      <p>x{numberOfPortions}</p>
      <p>{foodPrice}kn</p>
      <p>
        <MdDeleteForever
          className='cartFood__icon'
          onClick={handleRemoveFood}
        />
      </p>
    </div>
  );
};

edited Oct 6, 2020 at 15:03

answered Oct 6, 2020 at 14:13

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

9 Comments

Matej Over a year ago

Hm... I think I messed up something since ur soultion should work but everything from cart is removed, not just that specific item...

Matej Over a year ago

Yes, I tried to suggest edit but I couldint since it is only one charachter, problem continues, everything is removed from cart, and not only specific item, is it possible I messed something else? Do I need to spread something, maybe?

Prateek Thapa Over a year ago

Do check again, the code should work. I've updated. You need to check the id which comes as the prop in your filter function.

Matej Over a year ago

Let us continue this discussion in chat.

Fraction Over a year ago

@PrateekThapa It is not recommended to use indexes for keys if the order of items may change: medium.com/@robinpokorny/…

|

lucas24007 · Accepted Answer · 2020-10-06 15:27:52Z

2

Something like this should work :

const handleRemoveFood = (obj) => {
        setCartFood((oldList) => oldList.filter((item) => item.foodName !== obj.foodName));
    };

Your button (icon) should call this function with current object data (obj)

A working example : https://codesandbox.io/s/cart-isz6c?file=/index.js

edited Oct 6, 2020 at 15:27

answered Oct 6, 2020 at 15:01

lucas24007

1532 silver badges10 bronze badges

2 Comments

Matej Over a year ago

I updated my code with @Prateek's solution, can I use id on function you showed here?

Matej Over a year ago

I tried, still same, nothing happens, that specific items still stay in cart, I dont know whats wrong...

Fraction · Accepted Answer · 2021-03-24 07:56:32Z

1

From what I see in your repo:

Just pass the food._id to FoodCard so you access it when you want to add or remove an item from cart:

FoodList.js

const foodList = (typeOfList) =>
  typeOfList.map(food => {
    return (
      <FoodCard
        key={food._id}
        foodId={food._id}
        foodName={food.title}
        foodPrice={food.price}
        foodPic={food.image}
        setCartFood={setCartFood}
        cartFood={cartFood}
      />
    );
  });

FoodCard.js

const handleAddToCard = () => {
    setCartFood([
      ...cartFood,
      {
        foodId,
        foodName,
        foodPrice,
        numberOfPortions,
      },
    ]);
  };

CartFood.js

const handleRemoveFood = () => {
    setCartFood(cartFood => cartFood.filter((el) => el.foodId !== foodId));
  };

Working example:

You could use useReducer with useContext so you don't have to pass props down manually at every level, check this article for more info
You don't need to pass the cartFood as a property just for updating the state since you can use setState callback:

setCartFood(cartFood => [
      ...cartFood,
      {
        foodId,
        foodName,
        foodPrice,
        numberOfPortions,
      },
    ]);

edited Mar 24, 2021 at 7:56

answered Oct 6, 2020 at 17:16

Fraction

13.1k5 gold badges32 silver badges53 bronze badges

1 Comment

Matej Over a year ago

Hm...I opened your example on codesandbox but when I wanna delete item from cart nothing happens :/ p.s. Thanks for article definetly gonna read it

Collectives™ on Stack Overflow

React remove object from list of objects without unique value, using hooks

3 Answers 3

9 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related