I am trying to change the value of Select input and then i am getting the following warning in the console.
index.js:1446 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
But i am updating the state in correct way only , Here is my code
<Select
value={props.selectedService}
onChange={props.handleSelectChange}
inputProps={{
name: 'selectedService',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
<MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
<MenuItem value="Rolling">Rolling</MenuItem>
</Select>
And the handleselectchange functionality is here .
handleSelectChange = ({target: {name,value}}) => {
console.log(name);
console.log(value);
this.setState({
serviceRequest: {
selectedService: value
}
});
}
And state object declaration is below
state = {
open: false,
selectedDate: new Date(),
selectedTime : new Date(),
mailDetails :{
name:"",
email:'',
message:''
},
serviceRequest: {
name: '',
email: '',
mobileNumber:'',
address:'',
landMark:'',
selectedService:''
}
};
Can anyone please suggest what is the issue?
Uncontrolled here means you may be setting the value of the Select component to undefined,
this is because value={props.selectedValue} here. In this the props or selectedValue may come null so it turns out to be a uncontrolled component in that.
To solve the warning you can add condition to check null and set default value.
value={props.selectedValue ? props.selectedValue : " "}
Or for easy syntax using nullish coalescing operator (??)
value={props.selectedValue ?? " "}
the same of the accepted answer but check for undefined and provide default value with nullish coalescing operator (??)
value={props.selectedValue ?? ""}
You can only change
value={props.selectedService}
to
value={props.selectedService ? props.selectedService : ""}
<Select
***value={props.selectedService ? props.selectedService : ""}***
onChange={props.handleSelectChange}
inputProps={{
name: 'selectedService',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
<MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
<MenuItem value="Rolling">Rolling</MenuItem>
</Select>