use-shopping-cart
decrementItem()
decrementItem()
decrementItem(sku, quantity = 1)
reduces the quantity of an item based on the sku. By default, it decreases by one.
If you'd like to decrease by more than one, there is an optional quantity param:
decrementItem(sku, 10)
This decreases by 10
import { useShoppingCart } from 'use-shopping-cart'function Cart(product) { const { decrementItem, cartDetails } = useShoppingCart() const entries = [] for (const sku in cartDetails) { const entry = cartDetails[sku] entries.push( <article style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '50%' }} > <figure style={{ textAlign: 'center' }}> <img style={{ height: 200, width: 250 }} src={entry.image} alt={entry.name} /> <figcaption>{entry.name}</figcaption> </figure> <p>{entry.formattedValue}</p> <section style={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }} > {/* Decreases the quantity of the item */} <button onClick={() => decrementItem(sku)} aria-label={`Remove one ${entry.name} from your cart`} style={{ height: 50, width: 100, marginBottom: 30 }} > Remove one {entry.name} to your cart </button> {/* Decreases the item quantity by 10 */} <button onClick={() => decrementItem(sku, 10)} aria-label={`Remove ten ${entry.name} from your cart`} style={{ height: 50, width: 100, marginBottom: 30 }} > Remove 10 {entry.name} to your cart </button> </section> </article> ) } if (entries.length) return entries return <p>You currently don't have any items in your cart.</p>}