How to remove item correctly from an array in react?

Question

I got 2 component in my project.

Cart List and Cart Item in my project

In the cart list I got something like this.

const examCartItemList = [
    {
        name: 'Mocasines Pastoret 01',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 02',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 03',
        description: 'Leather Loafer with Penny Bar',
    },
];


const CartList = ({navigation}) => {
    const [itemList, setItemList] = useState(examCartItemList);

    const removeItem = name => {
        const filteredArray = itemList.filter(item => item.name !== name);
        setItemList(filteredArray);
    };

return (

<View style={[styles.pageContainer]}>
                    {itemList.map((cartItem, index) => (
                        <CartItem
                            removeItem={removeItem}
                            index={index}
                            key={index.toString()}
                            cartItem={cartItem}
                        />
                    ))}
                </View>
)

I am passing the removeItem func into the child component. Since I add the remove button in the cartItem component.

From my understanding the function will remove the item that I selected. Which is working fine.

The thing is the number of cart item coming from child component is behaving strangely

In my child component

I got something like this

const CartItem = ({cartItem, removeItem, index}) => {
  const [productCount, setProductCount] = useState(1);

  const decreaseProductCount = () => {
    if (productCount > 1) {
      setProductCount(productCount - 1);
    }
  };

  return (
    <View style={styles.componentContainer}>
      <View>
        <Image style={styles.componentImage} source={cartItem.source} />
      </View>
      <View style={styles.componentContent}>
        <View style={styles.cartItemNameContainer}>
          <Text style={[styles.nameText, styles.textDescription]}>
            {cartItem.name}
          </Text>
          <TouchableOpacity onPress={() => removeItem(cartItem.name)}>
            <Text style={globalStyle.normalText}>X</Text>
          </TouchableOpacity>
        </View> 
   </View> 
</View>

What happening is that as you can see in the pic. if the remove the item with name 01. The item 01 its self is removed but the child number of count is removed differently from the parent. if I remove item 01 the count 3 should be removed but the count 7 is remove instead

Here is the pic

Don't use index as key reactjs.org/docs/lists-and-keys.html#keys — Asaf Aviv
– Asaf Aviv, Commented Aug 30, 2021 at 3:51

alex31 · Accepted Answer · 2021-08-30 03:56:55Z

3

I think that the problem is because you are assigning the id value as the current index of the map operation. When you remove item 0, in the next render item 0 still exists. I think you must assign a static id to each cart item, just like this:

const examCartItemList = [
     {
         id: 1,
         name: 'Mocasines Pastoret 01',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 2,
         name: 'Mocasines Pastoret 02',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 3,
         name: 'Mocasines Pastoret 03',
         description: 'Leather Loafer with Penny Bar',
     },
];

Also, it's a good practice to remove item by id, so maybe you can reconsider to change the removeItem logic to remove item by id.

answered Aug 30, 2021 at 3:56

alex31

946 bronze badges

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

Comments

Alish Giri · Accepted Answer · 2021-08-30 04:14:21Z

I have got few suggestions,

Use `id` in the `examCartItemList`

const examCartItemList = [
{
    id: 1,
    name: 'Mocasines Pastoret 01',
    description: 'Leather Loafer with Penny Bar',
},
{
    id: 2,
    name: 'Mocasines Pastoret 02',
    description: 'Leather Loafer with Penny Bar',
},
{
    id: 3,
    name: 'Mocasines Pastoret 03',
    description: 'Leather Loafer with Penny Bar',
},

];

Use the `id` as key and pass `productCount` from here,

 <CartItem
     removeItem={removeItem}
     index={index} // Remove this prop if not used
     key={`${cartItem.id}`}
     cartItem={cartItem}
     productCount={itemList.length} // pass productCount from here
 />

It is always good to use a unique id to remove an item. Update `removeItem` func as follows and make sure to pass id to this function,

const removeItem = id => {
    const filteredArray = itemList.filter(item => item.id !== id);
    setItemList(filteredArray);
};

Remove `productCount` logic from `CartItem` component.

This should probably fix your issue.

Collectives™ on Stack Overflow

How to remove item correctly from an array in react?

2 Answers 2

Comments

Use `id` in the `examCartItemList`

Use the `id` as key and pass `productCount` from here,

It is always good to use a unique id to remove an item. Update `removeItem` func as follows and make sure to pass id to this function,

Remove `productCount` logic from `CartItem` component.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Use id in the examCartItemList

Use the id as key and pass productCount from here,

It is always good to use a unique id to remove an item. Update removeItem func as follows and make sure to pass id to this function,

Remove productCount logic from CartItem component.

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Use `id` in the `examCartItemList`

Use the `id` as key and pass `productCount` from here,

It is always good to use a unique id to remove an item. Update `removeItem` func as follows and make sure to pass id to this function,

Remove `productCount` logic from `CartItem` component.