Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Counter Card

    Challenge workspace

    15-20 min
    State and eventsPath 1/33
    State & events

    Your workspace must pass its server-side browser checks to complete this challenge.

    Counter Card

    Build a small counter that demonstrates React's state-driven rendering.

    Requirements

    • Store the count with useState and initialize it to 0.
    • Render the current value inside the provided output element.
    • Add buttons that increment and decrement by one.
    • Add a reset button that restores zero.
    • Use functional state updates for increment and decrement.

    Stretch goal

    Disable the decrement button when the counter reaches -10 and the increment button at 10.

    Hints

    • Calling a state setter triggers React to render the new value.
    • A functional update looks like setCount(current => current + 1).