Controlled Counter

React

Junior

State managementEvent handlers

Create a Counter component with internal count state starting at 0, displayed on screen.

Requirements

A "+" button increases count by 1 per click.
A "–" button decreases count by 1 per click.

Note

Do not edit data-testid attributes: they are used for testing.

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

AI Analyzer

Controlled Counter

React

Junior

State managementEvent handlers

Create a Counter component with internal count state starting at 0, displayed on screen.

Requirements

A "+" button increases count by 1 per click.
A "–" button decreases count by 1 per click.

Note

Do not edit data-testid attributes: they are used for testing.

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

AI Analyzer