State & Events

Forms in React

A controlled input gets its value from state and updates state on every keystroke.

function SignupForm() {
  const [email, setEmail] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    alert(`Signed up with ${email}`);
    setEmail("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button disabled={!email}>Sign up</button>
    </form>
  );
}