Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled

Question

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?

Answer 1

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 ?? " "}

Answer 2

the same of the accepted answer but check for undefined and provide default value with nullish coalescing operator (??)

value={props.selectedValue ?? ""}