Answer a 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

Answers

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

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