Why should you care?

Login, signup, and checkout all submit without a full page refresh — that is standard SPA behavior.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log('Login with', email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• onSubmit fires when user clicks submit or presses Enter.
• preventDefault stops navigation.
• Read state variables you built with onChange.

Try it yourself

1. Wire onSubmit with preventDefault.
2. console.log state on submit.
3. Add alert(JSON.stringify(formData)) to see all fields.
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

onSubmit + preventDefault on forms. Controlled inputs hold values in state. Submit handler reads state, calls API.