Build a Counter component | Interview Question

Q: Build a Counter component

**Target Audience:** Beginners preparing for their first frontend machine coding round. You know a little HTML and JavaScript; React is new or rusty. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1. ## 1. Why This Even Matters — A Story First Picture a clicker that a doorman holds at a small club. One press per guest in, one press per guest out, a button to zero it at closing time, and a hard limit: the fire code says 10 people at most. If the clicker happily shows 11, or goes to -1 when someone leaves twice by mistake, it is worse than useless. A counter component is that clicker. It looks like a "hello world", which is exactly why interviewers use it first: in five minutes it sho

The problem

Question presented to candidate: "Let us start simple. Build me a counter: it shows a number that starts at 0, with a plus button, a minus button and a reset button. It should stay between 0 and 10, and I want a small input to change how much each click adds. Walk me through your state as you go."

Requirements:

Show the current count, starting at the initial value (default 0).
+ adds the step, − subtracts it, Reset goes back to the initial value.
Respect min and max (0 and 10 here): the count never leaves the range, and the buttons show they cannot go further.
A step input: a whole number of 1 or more; anything else (empty, 2.5, -3) falls back to 1.
Accessible: real buttons with clear names, the new count announced to screen readers, keyboard friendly.

What a strong answer should cover:

The minimal state: the count and the raw step text. Everything else (the parsed step, "at min", "at max", the status message) is derived during render, not stored.
Functional updates (setCount(c => ...), or the framework equivalent) so rapid clicks always build on the latest value.
Clamping in one place, so a step of 4 from 9 lands on 10 instead of 13 or a no-op.
Why aria-disabled can be kinder than disabled on a button that becomes unavailable under the user's focus, plus aria-live for the changing number.
Props with sensible defaults (initial, min, max) so the component is reusable.

Clarifying questions expected:

"At the limit, should a big step clamp to the bound or be refused?"
"Should Reset also reset the step?"
"Is the count owned by this component, or does a parent need to read it?"

Code / implementation expected: Yes. A working component in the framework of choice, roughly 40-60 lines, with bounds, step and reset.

React
State
Events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for their first frontend machine coding round. You know a little HTML and JavaScript; React is new or rusty. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1.

1. Why This Even Matters — A Story First

Picture a clicker that a doorman holds at a small club. One press per guest in, one press per guest out, a button to zero it at closing time, and a hard limit: the fire code says 10 people at most. If the clicker happily shows 11, or goes to -1 when someone leaves twice by mistake, it is worse than useless.

A counter component is that clicker. It looks like

The solution is hidden so you can try first

11 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Counter from "./src/components/Counter";

export default function App() {
  return (
    <main className="page">
      <h1>Counter</h1>
      <p className="hint">
        Counts from 0 to 10. Change the step to jump faster.
      </p>
      <Counter initial={0} min={0} max={10} />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.