Lists and formsPath 16/33
ListsFormsState & eventsDerived state
Your workspace must pass its server-side browser checks to complete this challenge.
Repair the Workspace Equipment Cart
The IT team uses this cart to request equipment for a new hire. A previous implementation let line totals and the header count drift apart after repeated quantity changes. Complete the existing screen so the cart remains coherent while people adjust or remove items.
Requirements
- Render cart items from state using stable keys.
- Increment and decrement quantities without mutating existing objects or arrays.
- Prevent quantities from falling below one.
- Remove an item by its
id.
- Derive the item count, line totals, and subtotal; do not store them as separate state.
- Render an empty state when the last item is removed.
- Display the current item count and subtotal after every change.
What to explain in your review
- Why should quantity, line totals, item count, and subtotal have one source of truth?
- Which update operations must return new arrays or objects?
- Why is the quantity-one control disabled rather than allowing a zero-quantity line?
Reference solution notes
The reference stores only the cart items, uses functional updates for quantity changes, removes by stable ID, and derives all summaries with reduce. A valid alternative is to extract a reducer or line-item component; the behavioral contract is unchanged. Common mistakes include storing totals in state, mutating the array with splice, using array indexes as keys, updating only the header count, or leaving a stale subtotal after the final item is removed.
Stretch goal
Add a promo-code input that applies a 10% discount for the code REACT10.