No. 01Easy10 min

State: Build a Counter

Mission

Use the useState Hook so a component can remember a value and update the screen when it changes.

Tasks

1
Import the useState Hook directly from react.
2
Declare a state variable initialised to 0.
3
Render the current value inside the <h1>.
4
Make the button add 1 to the counter when clicked.

Editor

import React from 'react';
// Tip: import useState up here

export default function Counter() {
  // 1. Create your state here

  return (
    <div style={{ padding: '20px', textAlign: 'center', fontFamily: 'sans-serif' }}>
      <h1>Count: { /* 2. Show the state here */ }</h1>

      {/* 3. Wire the button with an onClick handler */}
      <button>Increment</button>
    </div>
  );
}

Requirements

0/7

Imports { useState } from 'react' (not run yet)
Calls useState directly, not React.useState (not run yet)
Declares a state variable initialised to 0 (not run yet)
Shows the state value inside the <h1> (not run yet)
The button's onClick calls the setter (not run yet)
Increases the value by exactly 1 (not run yet)
Never mutates the state variable (not run yet)

AI mentor

Reviews only the files you changed, plus the checks you missed.

Run the checks first. They are free and instant.