Controlled forms keep input values in state. Set value={state} and onChange to update state. Always call e.preventDefault() on form submit to handle it with JavaScript instead of the default browser behaviour.
Controlled Forms
function SignupForm() {
const [form, setForm] = useState({ name: "", email: "", password: "" });
const update = (field) => (e) =>
setForm(prev => ({ ...prev, [field]: e.target.value }));
const handleSubmit = async (e) => {
e.preventDefault();
await fetch("/api/signup", {
method: "POST",
body: JSON.stringify(form),
headers: { "Content-Type": "application/json" }
});
};
return (
);
}