When will you use this?

Add routing when your app has more than one screen and URLs should be bookmarkable.

• Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
• E-commerce sites route /product/123 to a product detail component.

Real-world: Practo patient intake form

Clinic registration binds every input to React state so staff can validate phone length and show inline errors before API submit.

Production-style code

function PatientForm({ onSave }) {
  const [form, setForm] = useState({ name: '', phone: '', age: '' });

  function update(field) {
    return e => setForm(prev => ({ ...prev, [field]: e.target.value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (form.phone.length !== 10) return alert('Enter 10-digit mobile');
    onSave(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={form.name} onChange={update('name')} placeholder="Full name" />
      <input value={form.phone} onChange={update('phone')} placeholder="Mobile" />
      <input value={form.age} onChange={update('age')} placeholder="Age" />
      <button type="submit">Register</button>
    </form>
  );
}

What happens in production: Controlled inputs are the default for forms that need validation, masking, or disable-submit until valid — every fintech KYC flow uses this.

Lesson example (start here)

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

function SignUp() {
  const [email, setEmail] = useState('');
  return (
    <form onSubmit={e => { e.preventDefault(); console.log(email); }}>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign up</button>
    </form>
  );
}

Line-by-line walkthrough

How it works (big picture)

• value={email} ties the input to state.
• onChange reads e.target.value and calls setEmail.
• The input cannot change without React updating state.

Do this on your computer

1. Add useState for each field.
2. Set value and onChange on inputs.
3. Handle submit with preventDefault and read state.
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.
• Change the initial state value and see the starting UI change.
• Open React DevTools (browser extension) while running Controlled Forms and inspect component props/state.

Remember

Controlled = value + onChange + state. Form data lives in React state. Standard pattern for small forms.

Common questions