Mui select default value

MUI Select Default Value

In MUI (Material-UI), you can set a default value for MUI select component using the value prop. This prop accepts the value which should be displayed as the default value in the select dropdown. Here’s an example:

import React from 'react';
import { Select, MenuItem } from '@mui/material';

export default function MySelect() {
  const [selectedValue, setSelectedValue] = React.useState('option1');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <Select value={selectedValue} onChange={handleChange}>
      <MenuItem value="option1">Option 1</MenuItem>
      <MenuItem value="option2">Option 2</MenuItem>
      <MenuItem value="option3">Option 3</MenuItem>
    </Select>
  );
}

In the example above, we have a functional component called MySelect which renders a select component with three menu items. The value prop of the select component is set to selectedValue which is a state variable initialized with a default value of ‘option1’.

When the user selects an option from the dropdown, the handleChange function is called and updates the selectedValue state with the selected value. This causes the select component to re-render with the updated default value.

This way, the select component shows the default value (in this case ‘Option 1’) when it is initially rendered.