React
Form submission
Learn to catch form submission and read the data.
Form submit
You can put controlled inputs in a form and process them at once with onSubmit. The handler stops the reload with e.preventDefault(), then reads the state.
Each input is a separate piece of state; on submit you gather them and process. This is the basis of multi-field forms.
A submit button with type="submit" triggers the form onSubmit; Enter works too.
Multi-field form
You keep several fields either in separate useState calls or in one object state. With the object approach you update with spread.
Example: setForm(f => ({...f, name: e.target.value})). This saves you from writing a handler per input; one handleChange is enough.
Later we will lighten this load with React Hook Form; for now we learn the basic approach.
Exercise Submit form
Complete the skeleton. Write a GreetForm component; import useState. Define const [name, setName] = useState("");. handleSubmit (parameter e) calls e.preventDefault() on its first line. Return a <form onSubmit={handleSubmit}> with <input value={name} onChange={e => setName(e.target.value)} /> and <button type="submit">Send</button> inside. Export it.
Show example solution
import { useState } from "react";
function GreetForm() {
const [name, setName] = useState("");
function handleSubmit(e) { e.preventDefault(); }
return <form onSubmit={handleSubmit}><input value={name} onChange={e => setName(e.target.value)} /><button type="submit">Send</button></form>;
}
export default GreetForm;
Test yourself
-
What should be the first thing on submit?
preventDefault stops the browser reload.
- Update state
- A fetch call
- Render
- e.preventDefault()
Show answer
e.preventDefault() — First stop the page reload.
-
Form submission: fill in the missing part
function handleSubmit(e) { ____; send(text); }
Show answer
function handleSubmit(e) { e.preventDefault(); send(text); }
-
Form submission: match the terms
- onSubmit
- Form submit
- e.preventDefault()
- Stops reload
- type="submit"
- Submit button
- setForm({...f})
- Object update
Next lesson: Multiple fields
