React
A component is changing an uncontrolled input to be controlled
A component is changing an uncontrolled input to be controlled.
React detected an input switching between controlled and uncontrolled states, which can lead to inconsistent UI behavior.
Observed message
A component is changing an uncontrolled input to be controlled.
Why it happens
- Input value starts as undefined or null and later becomes defined.
- State initialization is inconsistent.
- Form values are conditionally applied.
- Mixing defaultValue and value props.
How to fix it
- Initialize state with a default value like an empty string.
- Ensure inputs always receive a defined value prop.
- Avoid switching between controlled and uncontrolled modes.
- Use either value or defaultValue consistently.
