Command Palette

Search for a command to run...

Hectal
Phase 5: Forms and User Input
React · Exercise 1 of 5Next
Beginner

A controlled name field

Make the input with id="name" a controlled input: keep its text in state, with value and onChange.

The paragraph id="greeting" says Hello, <name>! using the typed name with spaces trimmed from both ends, or Hello, stranger! when the field is empty or only spaces.

The paragraph id="count" shows how many characters are in the field, like 4/20. The field never holds more than 20 characters: cut extra text off in the change handler.

What Check tests

  1. It starts with Hello, stranger!
  2. Typing Asha shows Hello, Asha!
  3. The counter shows 4/20
  4. The field stops at 20 characters
  5. Only spaces count as no name
  6. The input uses value and onChange

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.