My react select meant to be disabled doesn't display any default value

Question

I'm still fairly new to react and I have some struggles finding why my defaultValueAttributes doesn't display anything:

<Select
    id="my_disabled_select"
    name="my_disabled_select"
    disabled
    defaultValue={connectedUser.options[0]}
/>

I have tried to display the connectedUser.options[0] in an InputLabel tag and the value is defined !

Does anyone know why this happens and how can I fix this ?

Answer 1

You are missing the corresponding MenuItem child component so that the Select knows what to render.

Something like this should work:

<Select label="Age" defaultValue={10} disabled fullWidth>
   <MenuItem value={10}>Ten</MenuItem>
   <MenuItem value={20}>Twenty</MenuItem>
   <MenuItem value={30}>Thirty</MenuItem>
</Select>

See this example stackblitz