Form Submission in React

From the React Components & JSX cheat sheet · Forms & Controlled Components · verified Jul 2026

Form Submission

Handle form submit events

javascript
function LoginForm() {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  
  const handleSubmit = (e) => {
    e.preventDefault() // Prevent page reload
    console.log('Login:', email, password)
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit">Login</button>
    </form>
  )
}
⚠️ Always preventDefault() on form submit
💡 Form validates before onSubmit fires
📌 Button type="submit" triggers form submission
formssubmit

More React tasks

Back to the full React Components & JSX cheat sheet