# Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value.

- **ID:** `react/controlled-uncontrolled-input-switch`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 92%

## Root Cause

An input element's value prop transitions from undefined (uncontrolled) to a defined value (controlled) or vice versa during a re-render, causing React to switch modes unexpectedly.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| react@18.2.0 | active | — | — |
| react@16.14.0 | active | — | — |

## Workarounds

1. **Initialize the state variable to an empty string instead of undefined, and always pass a string to the value prop.** (95% success)
   ```
   Initialize the state variable to an empty string instead of undefined, and always pass a string to the value prop.
   ```
2. **If the value can legitimately be null/undefined, use defaultValue for the initial uncontrolled state and then switch to controlled with a key prop to remount the input.** (85% success)
   ```
   If the value can legitimately be null/undefined, use defaultValue for the initial uncontrolled state and then switch to controlled with a key prop to remount the input.
   ```

## Dead Ends

- **Adding a default value to the input via defaultValue prop while keeping value undefined** — defaultValue is only for uncontrolled inputs; mixing it with a value prop that later becomes defined still triggers the warning. (85% fail)
- **Using a ternary operator to conditionally set value to undefined or a string** — This creates the exact flip-flop between undefined and defined that causes the warning. (90% fail)
- **Setting the input's value to an empty string by default to avoid undefined** — While this avoids the warning, it may not reflect the intended initial state (e.g., null for optional fields), leading to incorrect UX. (40% fail)