Forms

Controlled inputs and handling a submit.

In a controlled input, React state holds the value, so your code always knows what was typed.

React (JSX)

import { useState } from "react";

export default function Signup() {
  const [email, setEmail] = useState("");

  function submit(e) {
    e.preventDefault();
    console.log("Send to server:", email);
  }

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

← State and events Effects and loading data →