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>