Overview

Create local state
- A counter needs a place to remember its number. useState gives us that memory.
  javascript
  const [count, setCount] = useState(0);
Show the state
- Whatever is in count should be visible in the UI.
  javascript
  <h1 data-testid="count-value">{count}</h1>
Wire up the “+” button
- Clicking + should add 1.
  javascript
  <button data-testid="increment-btn" onClick={() => setCount(c => c + 1)} > + </button>
Wire up the “–” button
- Clicking – should subtract 1.
  javascript
  <button data-testid="decrement-btn" onClick={() => setCount(c => c - 1)} > – </button>

These three pieces, the state, render logic, and add/remove handlers cover the essential mechanics for a fully working, immutably updated todo list.

App.js

import Counter from "./Counter";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-50 p-4 flex justify-center">
      <Counter />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here