JavaScript Curriculum
Forms in React
mediumThe coffee shop order form needs name, email, size selection, shot count, milk toggle, and a notes field. Every field is controlled — React owns the values, validation runs live, and submit serialises state directly.
Forms in React
React forms are controlled — state owns the value, onChange keeps it in sync. This gives you live validation, conditional fields, and easy form serialisation without touching the DOM directly.
Every Input Type — Controlled
Text, select, checkbox, radio, textarea — each one controlled:
The value is always in sync with state. React drives the input — the DOM follows.
const [value, setValue] = useState('') <input type="text" value={value} onChange={e => setValue(e.target.value)} placeholder="Type here..." />
Full Order Form — All Input Types Together
A real form with live state, validation on blur, and submit handling:
{
"name": "",
"email": "",
"size": "medium",
"extras": [],
"notes": "",
"newsletter": false
}Controlled vs Uncontrolled — Know the Difference
When to use each approach:
const [value, setValue] = useState('') <input value={value} onChange={e => setValue(e.target.value)} />
Your Challenge
Build a controlled coffee order form: name (text), email (text with @ validation), size (select: small/medium/large), shots (radio: 1/2/3), milk (checkbox), notes (textarea). Single handleChange. Validate name + email on blur with error messages. On submit: e.preventDefault(), validate all, show JSON summary if valid.
Challenge
Build a fully controlled order form with: text inputs (name, email), select (size), radio group (shots: 1/2/3), checkbox (milk), textarea (notes). One handleChange handles all fields. Validate name and email on blur and on submit. Show a success message with the submitted data.
Forms in React
mediumThe coffee shop order form needs name, email, size selection, shot count, milk toggle, and a notes field. Every field is controlled — React owns the values, validation runs live, and submit serialises state directly.
Forms in React
React forms are controlled — state owns the value, onChange keeps it in sync. This gives you live validation, conditional fields, and easy form serialisation without touching the DOM directly.
Every Input Type — Controlled
Text, select, checkbox, radio, textarea — each one controlled:
The value is always in sync with state. React drives the input — the DOM follows.
const [value, setValue] = useState('') <input type="text" value={value} onChange={e => setValue(e.target.value)} placeholder="Type here..." />
Full Order Form — All Input Types Together
A real form with live state, validation on blur, and submit handling:
{
"name": "",
"email": "",
"size": "medium",
"extras": [],
"notes": "",
"newsletter": false
}Controlled vs Uncontrolled — Know the Difference
When to use each approach:
const [value, setValue] = useState('') <input value={value} onChange={e => setValue(e.target.value)} />
Your Challenge
Build a controlled coffee order form: name (text), email (text with @ validation), size (select: small/medium/large), shots (radio: 1/2/3), milk (checkbox), notes (textarea). Single handleChange. Validate name + email on blur with error messages. On submit: e.preventDefault(), validate all, show JSON summary if valid.
Challenge
Build a fully controlled order form with: text inputs (name, email), select (size), radio group (shots: 1/2/3), checkbox (milk), textarea (notes). One handleChange handles all fields. Validate name and email on blur and on submit. Show a success message with the submitted data.