When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

• Product pages, login forms, and todo lists all use components, props, and state.
• When a user types in a search box, React state holds the text and filters a list.

Real-world: HDFC quick pay form

HDFC quick transfer form submits without full page reload. onSubmit handler validates amount, calls transfer API, and shows success toast — preventDefault stops browser navigation.

Production-style code

function QuickPayForm({ onTransfer }) {
  const [amount, setAmount] = useState('');
  const [toAccount, setToAccount] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (Number(amount) <= 0) return alert('Enter valid amount');
    onTransfer({ toAccount, amount: Number(amount) });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={toAccount} onChange={e => setToAccount(e.target.value)} placeholder="Account" />
      <input value={amount} onChange={e => setAmount(e.target.value)} placeholder="Amount" />
      <button type="submit">Pay Now</button>
    </form>
  );
}

What happens in production: Every banking and checkout flow uses the same onSubmit + preventDefault pattern — users stay on the SPA while money moves.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function LoginForm() {
  function handleSubmit(e) {
    e.preventDefault();
    alert('Form submitted');
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Login</button>
    </form>
  );
}

Line-by-line walkthrough

How it works (big picture)

• e.preventDefault() stops the browser from reloading the page on form submit.
• Pass handleSubmit without () — onClick={handleSubmit} not onClick={handleSubmit()}.

Do this on your computer

1. Add onClick to a button.
2. Add onChange to an input and log e.target.value.
3. Use onSubmit on a form with preventDefault.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Use onClick, onChange, onSubmit with camelCase. Pass a function reference, not a function call (usually). preventDefault on forms when handling submit in JS.

Common questions