Controlled inputs and form submission.
✍️ 3 exercises + code challenge in this lessonIn a controlled input, React state holds the value:
value={name} shows the state.onChange={e => setName(e.target.value)} updates it.Handle submission with onSubmit on the form and call e.preventDefault(). One state object with [e.target.name] can manage many fields.
Mastering React Forms helps you write clean and reliable React code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<div id="root"></div>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
function App() {
const [form, setForm] = useState({ name: "", course: "React", agree: false });
const [sent, setSent] = useState(null);
function update(e) {
const { name, value, type, checked } = e.target;
setForm({ ...form, [name]: type === "checkbox" ? checked : value });
}
function submit(e) {
e.preventDefault();
setSent(form);
}
return (
<form onSubmit={submit}>
<input name="name" value={form.name} onChange={update} placeholder="Your name" required /><br /><br />
<select name="course" value={form.course} onChange={update}>
<option>React</option><option>Python</option><option>SQL</option>
</select><br /><br />
<label><input type="checkbox" name="agree" checked={form.agree} onChange={update} /> I agree</label><br /><br />
<button disabled={!form.agree}>Enrol</button>
{sent && <p>✅ {sent.name} enrolled in {sent.course}</p>}
</form>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>Check what you learned in “React Forms”.
Update state when the input changes.
<input value={name} onChange={e => setName(e.target.)} />
What is a controlled input?
Create a controlled input whose initial state is "Hina", and show the same value in a <p> below it.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services