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?

Raj Saraogi · Answer 1 · 2021-10-19T04:32:24.433

107

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

edited Oct 19 '21 at 04:32

answered Mar 30 '19 at 09:16

Raj Saraogi

1,780
1
13
21

7

This will create an issue: You must control your input, or make it a controlled component. Generally, from my personal experience, in React, you want to avoid controlled Input as much as you can. A controlled input generally puts more verbose logic into your code and if you have no need for extra functionalities like validation, it is redundant code. Besides, a controlled component is always less performant than an uncontrolled one due to having to deal with state. This is noticeable especially when you have a lot of fields in your form. – allicanseenow Mar 02 '20 at 13:28
@allicanseenow I prefer having everything in my global app state, to pick whatever is needed from it when I 'validate'. For this specific issue, I just added a default value to avoid the `undefined` step: `const {selectedValue = ''} = props;` – Chris Feb 22 '21 at 21:40

score 14 · Answer 2 · answered Oct 13 '20 at 02:14

14

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

value={props.selectedValue ?? ""}

answered Oct 13 '20 at 02:14

mindlid

1,679
14
17

1

You could improve the accepted answer by editing it. – jasie Oct 13 '20 at 06:23

Mnai · Accepted Answer · 2022-05-20T01:30:18.983

With my case I had to set a default value on the Controller component

<Controller
  name="stackoverflow"
  rules={{ required: 'Please select a stackoverflow' }}
  control={control}
  defaultValue={''} // <---------- HERE
  render={({ field, fieldState }) => {
    return (
      <FormControl>
        <InputLabel id="stackoverflow-label">stackoverflow</InputLabel>
        <Select
          id="stackoverflow-select"
          label="stackoverflow"
          labelId="stackoverflow-id"
          error={!!fieldState.error}
          {...field}
        >
         <MenuItem value={i ?? ''} key={i}>
                {i}
         </MenuItem>
        </Select>
        {fieldState.error ? (
          <FormHelperText error>
            {fieldState.error?.message}
          </FormHelperText>
        ) : null}
      </FormControl>
    );
  }}
/>

It worked for me with `FormControlLabel defaultValue={false}` — testing_22, Jan 24 '23 at 05:04
it worked for me with `` but I still think nowhere in that syntax should mui conclude this is an attempt to turn into a controlled component. other controls (such as TextField) work with undefined 'defaultValue' just fine — Nir O., Feb 11 '23 at 12:27

score -2 · Answer 4 · answered Jul 01 '21 at 09:09

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>

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

4 Answers4