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

Solution 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

Solution 2

As React introduced React-Hooks, you just need to pass your default value in React.useState() as React.useState(10).

export default function CustomizedSelects() {
  const classes = useStyles();
  const [age, setAge] = React.useState(10);// <--------------(Like this).
  const handleChange = event => {
    setAge(event.target.value);
  };
  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.margin}>
        <Select
          value={age}
          className={classes.inner}
          onChange={handleChange}
          input={<BootstrapInput name="currency" id="currency-customized-select" />}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

Solution 3

You can just pass the displayEmpty into select

<Select
    id="demo-simple-select-outlined"
    displayEmpty
    value={select}
    onChange={handleChange}
>

and define the menuItem like

<MenuItem value=""><Put any default Value which you want to show></MenuItem>

Solution 4

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="uni">UNI</InputLabel>
  <Select
    key={value}
    defaultValue={value}
    labelId="uni"
    id="uni"
    name="uni"
    onBlur={onChange}
    label="uni"
  >
    {unis.map((u, i) => (
      <MenuItem value={u.value} key={i}>
        {u.label}
      </MenuItem>
    ))}
  </Select>
</FormControl>;

Solution 5

If you take a look at the Select Api of Material UI here, you could do it easily.

1. As explained above, you need to pass the default value in your state variable:

const [age, setAge] = React.useState(10);// <--------------(Like this).

2. Set displayEmpty to true:

If true, a value is displayed even if no items are selected. In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).

<Select 
  displayEmpty
/>

View more solutions