How to set default value in material-UI select box in react?

Question

I am using Select box from material-ui

I want to show "select the value" option by default selected but after that user is not able to select this option.

<FormControl required className={classes.formControl}>   <InputLabel htmlFor="circle">Circle</InputLabel>     <Select       value={circle}       onChange={event => handleInput(event, "circle")}       input={<Input name="circle" id="circle" />}     >       <MenuItem value="" disabled>         <em>select the value</em>       </MenuItem>        <MenuItem value={10}>Ten</MenuItem>       <MenuItem value={20}>Twenty</MenuItem>       <MenuItem value={30}>Thirty</MenuItem>     </Select>   <FormHelperText>Some important helper text</FormHelperText> </FormControl> 

Current code on sandbox: https://codesandbox.io/s/xoylmlj1qp

I want to make like this: https://jsfiddle.net/wc1mxdto/

---

Update

I changed the state 20 to blank string in circle

form: {   searchValue: "",   circle: '',   searchCriteria: "" } 

now expected output should be dropdown should show "please select value" but currently it showing this

Answer 1

You need to provide correct MenuItem value in state to be matched on render.

Here is the working codesandbox: Default Select Value Material-UI