uncontrolled to controlled ⚛️ React

Warning: A component is changing an uncontrolled input to be controlled

An input’s value started as undefined (uncontrolled) and later became a defined value (controlled), or vice versa.

Seen on: React

Meaning

React treats value={undefined} as uncontrolled. When state initialises as undefined/null and later gets a string, React warns. Initialise with an empty string (or false for checkboxes).

Common causes

  • useState() without an initial value
  • Form state loaded asynchronously (undefined until fetch completes)
  • Optional fields missing in API data (user.middleName undefined)
  • Checkbox using checked={undefined}

⚡ Quick fix

  1. Initialise: useState('') / useState(false)
  2. Fall back in JSX: value={user.name ?? ''}
  3. Don’t mix value with defaultValue

Detailed fix by platform

React

  1. Always-defined values:
    jsx
    const [form, setForm] = useState({ name: '', subscribe: false });
<input value={form.name ?? ''} onChange={e => setForm({ ...form, name: e.target.value })} />
<input type="checkbox" checked={!!form.subscribe} onChange={e => setForm({ ...form, subscribe: e.target.checked })} />

How to diagnose

  1. Initial value — Is value undefined/null on first render?
  2. Data — Async data missing fields?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.