Command Palette

Search for a command to run...

Hectal
Phase 1: JSX: Writing UI in JavaScript
React · Exercise 1 of 6Next
Beginner

Clean up pasted HTML

This contact form was pasted straight from an HTML page. It shows up, but React prints six warnings in the console.

Fix the JSX so the console has no warnings. Keep the same elements, ids and text: the form keeps the class contact, the hint keeps the class hint and its 13px font size, the labels stay linked to their fields, and the message box stays read-only.

What Check tests

  1. The console has no React attribute or style warnings
  2. The form still has the class contact
  3. Both labels are linked to their fields
  4. The name field allows at most 30 characters and the message box is read-only
  5. The hint keeps its class and 13px font size

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.