Introduction
Forms in React work differently from plain HTML forms because React typically treats form elements as controlled components, meaning their value is driven by React state rather than by the DOM itself. This gives you a single source of truth for input data, makes validation and conditional logic straightforward, and lets you respond to every keystroke. React also supports uncontrolled components, where the DOM manages its own state and you read values via refs when needed, which is useful for simple forms or integrating with non-React code.
Cricket analogy: A controlled scorecard is like the official scorer's single ledger driving every displayed number, nothing trusted unless written in the ledger first, making run-rate checks trivial; an uncontrolled scorecard is like a fan's mental tally read only when asked (via ref), fine for a backyard game.
Syntax
function LoginForm() {
const [email, setEmail] = useState('');
function handleSubmit(event) {
event.preventDefault();
console.log('Submitting:', email);
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<button type="submit">Log In</button>
</form>
);
}Explanation
In a controlled component, the input's value prop is always set from state, and an onChange handler updates that state on every change, so the displayed value and the React state never drift apart. The form's onSubmit handler must call event.preventDefault() to stop the browser's default full-page reload behavior. Checkboxes and radio buttons use checked instead of value, while <select> elements use value on the <select> tag itself rather than a selected attribute on individual <option> elements. For forms with many fields, a single state object with computed keys (using the input's name attribute) avoids declaring a separate useState call per field.
Cricket analogy: A run-tally input's value always comes from state, and onChange updates it on every ball so the scoreboard never drifts from the ledger; submitting the innings summary must call preventDefault() to stop a page reload; a 'boundary' checkbox uses checked, and one state object keyed by each stat's name (runs, wickets, overs) replaces per-field useState.
Example
function SignupForm() {
const [formData, setFormData] = useState({ username: '', bio: '' });
function handleChange(event) {
const { name, value } = event.target;
setFormData((prev) => ({ ...prev, [name]: value }));
}
function handleSubmit(event) {
event.preventDefault();
console.log(formData);
}
return (
<form onSubmit={handleSubmit}>
<input name="username" value={formData.username} onChange={handleChange} />
<textarea name="bio" value={formData.bio} onChange={handleChange} />
<button type="submit">Sign Up</button>
</form>
);
}Output
As the user types into either field, handleChange updates only the corresponding key in formData using the input's name attribute, while the other field's value is preserved via the spread operator. On submit, the page does not reload, and the console logs the full formData object, e.g. { username: 'alice', bio: 'Hello!' }.
Cricket analogy: Typing into the 'player name' field updates only that key in the scorecard state using the input's name attribute, while the 'runs scored' field's value is preserved via the spread operator; on submit, the page doesn't reload and the console logs { player: 'Kohli', runs: '82' }.
Key Takeaways
- Controlled components bind an input's value to React state and update it via onChange.
- Always call event.preventDefault() in onSubmit to stop the default page reload.
- Use the name attribute plus a single state object to manage multiple fields with one handler.
- Checkboxes use checked; select elements set value on the <select> tag, not on <option>.
- Uncontrolled components use refs to read values directly from the DOM when full React control isn't needed.
Practice what you learned
1. What defines a controlled component in React?
2. Why is event.preventDefault() called inside a form's onSubmit handler?
3. Which prop is used to control a checkbox's checked state in React?
4. In a multi-field form using one state object, how does a single handleChange function know which field to update?
Was this page helpful?
You May Also Like
Event Handling in React
Learn how React wraps native DOM events into SyntheticEvents and how to attach handlers to elements.
Form Validation in React
Implement client-side validation logic for React forms, including error state and submit-time checks.
Controlled vs Uncontrolled Components
Compare controlled components, where React state drives form values, with uncontrolled components that rely on the DOM and refs.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics