← Back to problems
Frontend: Counter Component (React useState)
EasyTypeScriptDescription
> This problem is paper-only - see explanation for the canonical React solution. The auto-grader validates a pure-function model of the component's state transitions.
Build a React Counter component that:
- Displays the current count.
- Has Increment / Decrement / Reset buttons.
- Accepts a `step` prop (default 1) and a `min` / `max` clamp (defaults: -Infinity / Infinity).
- Disables Decrement at `min`, Increment at `max`.
**For the auto-grader:** implement a pure reducer `counterReducer(state, action, config)` modeling the state transitions. Action shape: `{ type: "inc" | "dec" | "reset" }`. Config: `{ step, min, max, initial }`. State: `{ count }`. Return the next state.
Example 1
Input: state = {count: 5}, action = {type: "inc"}, config = {step:1,min:0,max:10,initial:5}
Output: {count: 6}
Example 2
Input: state = {count: 10}, action = {type: "inc"}, config = {step:1,min:0,max:10,initial:5}
Output: {count: 10}
Explanation: Already at max - inc is a no-op.
Constraints
- All numeric values are finite or +/-Infinity.
- step >= 1.
- initial is clamped to [min, max] on reset.
Loading editor...