Made-up products. This cart lives in React state, so refreshing the page empties it.
{formatPrice(product.variants[0].priceMinor)}
{/* Step 1: the size dropdown goes here */}Your cart is empty.
{formatPrice(product.variants[0].priceMinor)}
{/* Step 1: the size dropdown goes here */} ``` Delete both of them and put this in their place: ```jsxSelected: {selectedVariantId}
``` Save. You should see a Size dropdown with Small, Medium, and Large, and Large should be greyed out with "(sold out)". Change it to Medium, and the "Selected:" line should change to `demo-shirt-medium`. So what did we just write? This is the same controlled input from Week 5, just a dropdown this time. `value` comes from state, and `handleVariantChange` puts `event.target.value` back into state. We `.map()` over the variants to make one `` each, and each one needs a `key`, like our interest cards did. Each option's `value` is the variant ID, and the text between the tags is the label people read. That way we could rename "Small" to "S" and the cart wouldn't care, because the ID stays the same. `!` flips a Boolean, so a sold-out variant gives `disabled={true}`. Same idea with `&&` from Week 5: the "(sold out)" text only shows up when the variant isn't available. The "Selected:" line is just there so we can see the state. We'll delete it in Step 3. ## Step 2: Add to cart Now we need the cart itself. The cart is a list, so it starts as an empty array. Right under the `const [selectedVariantId, setSelectedVariantId] = useState(...)` line, add: ```jsx const [cart, setCart] = useState([]); ``` Now the function that runs when someone clicks Add. Put this right after the closing `}` of `handleVariantChange`: ```jsx function handleAdd(variantId) { const variant = product.variants.find((option) => option.id === variantId); setCart([ ...cart, { variantId: variant.id, name: product.name, label: variant.label, quantity: 1, unitPriceMinor: variant.priceMinor, }, ]); } ``` Now the button. Right under the `Selected: {selectedVariantId}
` line, add: ```jsx ``` Last piece: we need to actually show the cart. In the cart section, find: ```jsxYour cart is empty.
``` Replace it with: ```jsx {cart.length === 0 &&Your cart is empty.
}{formatPrice(line.unitPriceMinor)} each
Quantity: {line.quantity}
Selected:
` down to the button's ``: ```jsxSelected: {selectedVariantId}
``` Delete all of that and replace it with: ```jsxQuantity: {line.quantity}
`, add: ```jsx ``` Each line passes its own `variantId`, so we wrap the call in an arrow again. That arrow waits for the click. Save. Add Small and Medium, then click Remove on Small. Medium should still be there. Remove Medium too, and you should see "Your cart is empty." again. ## When the cart lives on a server Our cart runs instantly in the browser. The merch site's cart will be different, because Fourthwall holds it. Remember these from last week?| Endpoint | What it does |
|---|---|
| `POST /v1/carts/{cartId}/add` | Add items to a cart |
| `POST /v1/carts/{cartId}/change` | Change item quantities |
| `POST /v1/carts/{cartId}/remove` | Remove items |
| What you see | What to check |
|---|---|
| The page goes blank and the Console says `useState is not defined` | Add the import from Step 1 at the top of `App.jsx` , with the other imports (not inside `App` ). |
| Clicking does nothing and the Console says `cart is not defined` or `setCart is not defined` | The function got pasted outside `App` (after its last `}` ). Move it inside `App` , above `return (` . |
| A red error about an unexpected token or `}` | Usually a paste landed inside the wrong tag or a brace went missing. Compare that spot with the snippet, or grab the catch-up copy for the step you're on. |
| The dropdown changes, but Add uses the wrong size | The `select` should read and set `selectedVariantId` , and `AddButton` should get that same ID. |
| Same size twice still makes two lines | The `existingLine` check from Step 2 has to come before the `setCart([...cart, ...])` at the bottom of `handleAdd` , and it needs its `return;` after the `cart.map` part. Without that `return` , both `setCart` calls run and the second one wins. |
| Small and Medium become one line | Check the `existingLine` find in `handleAdd` . It has to compare `line.variantId === variantId` , not the product ID. |
| The page goes blank with "Too many re-renders" in the Console | Something is calling a function while React draws the page. Pass the function ( `onAdd={handleAdd}` ), and wrap the others in an arrow, like `() => handleAdd(selectedVariantId)` . |
| You click Add and the cart stays empty, with no error | Check Remove's `onClick` . Without the arrow, `handleRemove(line.variantId)` runs while the line is being drawn, so it removes itself instantly. |
| Clicking does nothing to the cart | Make a new array or object and call `setCart` . If you edit the old one with `push` or `existingLine.quantity = 2` , React may not notice anything changed. |
| The price is 100 times too big | The data is in cents. Divide by 100 only once, in `formatPrice` . |
| The cart is empty after refreshing | That's expected. This cart only lives in React state. |