react - Warning: ComponentXXX is changing an uncontrolled input of type undefined to be controlled

Question

i tried to only use my props for my input values - no controlled components by the internal state. its working i guess but i get the following error:

warning.js:33 Warning: ComponentXXX is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

heres my code:

input:

  <input type="radio" name="answer" value="ValueType1"
                                   checked={this.props.valueType === "ValueType1"}
                                   onChange={this.handleValueTypeChange}/>

interface:

declare interface Manager1 {
    valueType: string;
}

change function:

private handleValueTypeChange(event: any) {
    this.props.onUpdateMethod({
        ...this.props.manager {        
                valueType: event.target.value,
         }
    });
}

any ideas?

Chetan Jadhav CD Chetan Jadhav CD · Accepted Answer · 2018-06-21T15:13:28

If you initially pass undefined or null as the value prop, the component starts life as an "uncontrolled" component. Once you interact with the component, you set a value and react changes it to a "controlled" component, and issues the warning.

See if this value - checked={this.props.valueType === "ValueType1"} is being initially set to undefined. Make sure its being set to either that or false if you want it to start unchecked.

react - Warning: ComponentXXX is changing an uncontrolled input of type undefined to be controlled

1 Answers