react state_error ai_generated true

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

ID: react/controlled-uncontrolled-switch

Also available as: JSON · Markdown
92%Fix Rate
92%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Input value switches between undefined and defined. Must be always controlled or always uncontrolled.

generic

Workarounds

  1. 95% success Initialize state with empty string, not undefined: useState('') 
    // Bad: const [val, setVal] = useState()  // undefined initially
// Good: const [val, setVal] = useState('')

    Sources: https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable

  2. 90% success Use value={val ?? ''} to ensure value is never undefined 
    Use value={val ?? ''} to ensure value is never undefined

    Sources: https://react.dev/reference/react-dom/components/input

Dead Ends

Common approaches that don't work:

  1. Add suppressWarning prop 90% fail

    No such prop exists — fix the state management

  2. Use defaultValue and value together 85% fail

    React doesn't support both — pick one pattern

Error Chain

Frequently confused with: