How do you handle screen state like a cart in React?

Hold the values that must appear on screen (items, quantities, the total) in component state, and update that state on each user action. When state changes, React re-renders the view.

How do I verify cart behavior?

Don't test only a single add. Add the same product several times to check the quantity merges, and confirm the total stays correct through those repeated actions.

Does this problem need a server or global state?

No. It works inside a single component with the 3 products as a static array and only on-screen state. Server persistence and stock checks are out of scope.

Add to Cart

Your task

Pressing 'Add' on a product in the list adds an item to the cart and updates the total. Adding the same product again increases its quantity by 1. Complete CartPage.

Ground rules

•A single component. The 3 products are a static array. No server or global state.

Not required

•Server persistence, stock checks, item removal, direct quantity input.

▶About this challenge

Build a React component that handles a product list and a cart together. Pressing 'Add' adds an item to the cart, adding the same product again increases its quantity by 1, and the total updates alongside. It all happens inside a single component with on-screen state — no server or global state.

A cart is a screen where items, quantities, and the total all have to stay in agreement as the user acts. Because several values are linked, the key is keeping the related values moving consistently whenever one of them changes. In React you hold the on-screen values in state and update that state on each action so the view re-renders. What makes the behavior trustworthy is verifying not just a single action but repeated ones — like adding the same product several times — and checking that the quantity and total still agree.

How do you handle screen state like a cart in React?: Hold the values that must appear on screen (items, quantities, the total) in component state, and update that state on each user action. When state changes, React re-renders the view.
How do I verify cart behavior?: Don't test only a single add. Add the same product several times to check the quantity merges, and confirm the total stays correct through those repeated actions.
Does this problem need a server or global state?: No. It works inside a single component with the 3 products as a static array and only on-screen state. Server persistence and stock checks are out of scope.

Add to Cart

Your task

Pressing 'Add' on a product in the list adds an item to the cart and updates the total. Adding the same product again increases its quantity by 1. Complete CartPage.

Ground rules

•A single component. The 3 products are a static array. No server or global state.

Not required

•Server persistence, stock checks, item removal, direct quantity input.

▶About this challenge

How do you handle screen state like a cart in React?: Hold the values that must appear on screen (items, quantities, the total) in component state, and update that state on each user action. When state changes, React re-renders the view.
How do I verify cart behavior?: Don't test only a single add. Add the same product several times to check the quantity merges, and confirm the total stays correct through those repeated actions.
Does this problem need a server or global state?: No. It works inside a single component with the 3 products as a static array and only on-screen state. Server persistence and stock checks are out of scope.