react redux - I try to delete an Item other items get deleted and also NaN comes in total

Viewed 144

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} />
0 Answers
Related