Quantity Stepper

EasyReact Components15 min5 tests

Build a quantity stepper with Decrease/Increase buttons and a live status value, clamped between 1 and 10.

Create a QuantityStepper-style App component that lets a user adjust a quantity.

The UI has:

A "Decrease" button and an "Increase" button (each labelled accessibly via aria-label).
A live region (role="status") that displays the current quantity. It starts at 1.

Behavior rules:

Clicking Increase adds 1 to the quantity.
Clicking Decrease subtracts 1 from the quantity.
The quantity is clamped between 1 (min) and 10 (max).
The Decrease button is disabled when the quantity is at the minimum (1).
The Increase button is disabled when the quantity is at the maximum (10).

The status text should always reflect the current value so it can be read by assistive tech and tests.

Requirements

Render a heading for the component.
Render a Decrease button with aria-label "Decrease" and an Increase button with aria-label "Increase".
Render the current quantity inside an element with role="status", starting at 1.
Clicking Increase increments the quantity by 1; clicking Decrease decrements it by 1.
Clamp the quantity between a minimum of 1 and a maximum of 10.
Disable the Decrease button when the quantity is 1, and disable the Increase button when the quantity is 10.

Hints (4)

Hold the quantity in component state with useState, initialized to 1.
Use Math.min(10, q + 1) and Math.max(1, q - 1) when updating so the value never escapes the bounds.
Set the disabled prop on each button by comparing the current value to the min/max bounds.
Put the number inside the role="status" element so screen readers and tests can read the live value.

Zomato · Uber · Zoho · Rapido · Delhivery · Nykaa