What are the different ways to update and remove the item from the state?

See more:

Javascript

Typescript

ReactJS

ES6

const [cartItems, setCartItems] = useState([] as memePropsType[]);

<pre lang="Javascript">
const handleAddToCart = (clickedItem: memePropsType) => {
    setCartItems((prev) => {
      // 1. Is the item already added in the cart?
      const isItemInCart = prev.find((item) => item.id === clickedItem.id);

      if (isItemInCart) {
        return prev.map((item) =>
          item.id === clickedItem.id
            ? { ...item, amount: item.amount + 1 }
            : item
        );
      }
      // First time the item is added
      return [...prev, { ...clickedItem, amount: 1 }];
    });
  };

handleRemoveFromCart updates the cartItem

<pre lang="Javascript">
const handleRemoveFromCart = (id: string) => {
    setCartItems((prev) =>
      prev.reduce((ack, item) => {
        if (item.id === id) {
          if (item.amount === 1) return ack;
          return [...ack, { ...item, amount: item.amount - 1 }];
        } else {
          return [...ack, item];
        }
      }, [] as memePropsType[])
    );
  };

Both works fine, but what would anyone do to achieve this in different way?

What I have tried:

I tried filter, map for handleRemoveFromCart but it has bug.