Challenge: Counter and reset

Write a counter with increment, decrement and reset that has a lower bound.

Challenge: Counter and reset

This challenge asks you to write a Counter component. Three buttons: Increment, Decrement, Reset. The count state starts at 0.

Increment: setCount(c => c + 1). Decrement: setCount(c => c - 1). Reset: setCount(0).

Add a guard to prevent going below zero: on decrement, use setCount(c => Math.max(0, c - 1)). So count never goes negative.

Exercise Write Counter with guard

Complete the skeleton. Write a Counter component. count state starts at 0. Show <p>{ '{ count }' }</p>. Add three buttons: Increment setCount(c => c + 1), Decrement setCount(c => Math.max(0, c - 1)), Reset setCount(0). Export it.

Show example solution

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <button onClick={() => setCount((c) => Math.max(0, c - 1))}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

Test yourself

Reset

To reset the counter, call ____.

Show answer

To reset the counter, call setCount(0).

Match the counter buttons

Increment

c + 1
Decrement

Math.max(0, c-1)
Reset

0
guard

Math.max

Next lesson: Challenge: Dropdown menu

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies