Hi guys I am working on a react app using redux toolkit here I try to delete an Item. so When I try to delete an item all other items also deleted and in
Final Total = $NaN
I get the above NaN, what I am trying to do is when I delete one item it should not effect other items also total should not be NaN
Below is my card:
import React from 'react'
const CardItems = ({carditems, removeCart}) => {
console.log("Cart Items");
console.log(carditems);
return (
<div style={{ padding: "2rem"}}>
{
carditems.map(item => (
<div key={item}>
<h3 className="title">{(item.count) ? `${item.title} x ${item.count}` : null }</h3>
<div className="price"> {(item.count) ? `${'item total = '} ${item.count * item.price}` : null }
</div>
{(item) ? <button className="addtocart" onClick={() => removeCart(item)}>Remove Item</button> : null }
</div>
))
}
{ carditems.length !== 0 && ( <div className="carttotal title">
Final Total = ${
carditems.reduce((a,c) => a + c.price * c.count, 0)
}
</div> ) }
</div>
)
}
export default CardItems
This is my cart function which I am passing:
const removeCart = (adv) => {
const cartItems = selectedAdds.slice();
adv = cartItems.filter(x =>x.id !== Products.__id)
setCardItems([adv]);
}
This is where I link to component:
<CardItems carditems={cardItems} removeCart={removeCart} />