use-shopping-cart

setItemQuantity()

setItemQuantity(sku, quantity = 1) allows you to update the

You currently don't have any items in your cart.
Come back after you add more items to your cart.

{}
import React from 'react'
import { useShoppingCart } from 'use-shopping-cart'
export function Cart() {
const { setItemQuantity, cartDetails } = useShoppingCart()
const entries = []
for (const sku in cartDetails) {
const entry = cartDetails[sku]
const options = []
for (let quantity = 1; quantity <= 20; ++quantity)
options.push(<option value={quantity}>{quantity}</option>)
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>
<div style={{ display: 'flex', alignItem: 'center' }}>
{/* Dropdown to change the item's quantity */}
<label htmlFor="quantity-select" style={{ margin: '0 1rem 0 0' }}>
Quantity:
</label>
<select
id="quantity-select"
defaultValue={entry.quantity}
onChange={(event) => {
setItemQuantity(sku, event.target.value)
}}
>
{options}
</select>
</div>
</article>
)
}
if (entries.length) return entries
return <p>You currently don't have any items in your cart.</p>
}
Edit this page on GitHub