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

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


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>