Project: The Cart in JavaScript

The cart is almost done. The given src/Cart.jsx now has a − and a + button on each line. They call a prop onChange with the line's id and a change, -1 or 1. App owns the cart, so App writes that function and passes it down.

To change one item of an array in state, build a new array with map: every other item comes back as it is, and the changed one as a copy made with { ...item }. To drop items, use filter. Here is the idea on another list, tasks that can be ticked off:

function toggleDone(id) {
  setTasks(tasks.map((task) =>
    task.id === id ? { ...task, done: !task.done } : task
  ));
}

// only the open tasks:
tasks.filter((task) => !task.done)

What depends on the cart is computed during the draw with &&: a Free delivery paragraph when the total is at least $50, and an Empty cart button only while the cart has lines. Clicking it saves a new, empty array.

The check adds a Gift card ($50) and a Mug ($12), clicks + on the Mug, − on the Gift card, then Empty cart:

> click "Add to cart" in "Gift card"
  +   item: Gift card × 1 $50
  +   text: Free delivery
  +   button: Empty cart
> click "Add to cart" in "Mug"
  +   item: Mug × 1 $12        (Total: $62)
> click "One more Mug"
  +   item: Mug × 2 $24        (Total: $74, Cart (3))
> click "One less Gift card"
  -   item: Gift card × 1 $50  (Total: $24, Cart (2))
  -   text: Free delivery
> click "Empty cart"
  +   text: Your cart is empty
  +   button: Checkout (disabled)

Your task: in src/App.jsx, write changeQuantity(id, change), which changes only the clicked line and drops a line that reaches 0, and pass it to Cart as onChange. Add emptyCart, a Free delivery paragraph from $50, and an Empty cart button for a cart with lines.

Assignment
Follow the Coding Tutorial to finish the cart: − and + on each line, Free delivery from $50, and an Empty cart button.

Hint
Map first, then filter the new array before you save it: a line at 0 must leave the cart. >= means at least, so a total of exactly $50 also gets free delivery.