CODEWITHSUNDEEP
reactjsmaterial-ui
Baba
Baba

Reputation: 2219

Showing a default value for a select control using react and material-ui control

I am working on a react page using material-ui. I am retrieving data from the database to populate my select control. I want to be able to have a default value like "Select the value". The section highlighted in yellow is just blank.

How can I achieve this? An image of what exist is attached. 

    <FormControl id="ron" className="form-control">
        <InputLabel htmlFor="productDescription" shrink>Product Code/Description</InputLabel>
        <Select  
            value={this.state.productCode}  
            onChange={this.handleChangeProductCode}             
            name='productcode'
        >
            <MenuItem value="">
              select the value 
            </MenuItem>
            {this.dataForProductCodeControl()}
        </Select>
    </FormControl>


     dataForProductCodeControl() {            
          if(this.props.groupedData != undefined){

            return this.props.groupedData.map((dt, i) => {
              return (
                <MenuItem key={i} value={dt.productCode}>
                    {dt.productCode} | {dt.productDescription}
                </MenuItem>
              );
            });
          }     
        }

enter image description here

Upvotes: 3

Views: 11942

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81016

You need to specify the displayEmpty prop on the Select.

Here's a working example:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: ""
  });

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple" shrink>
          Age
        </InputLabel>
        <Select
          value={values.age}
          displayEmpty
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value={""}>Select Age</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

Edit Select displayEmpty

Upvotes: 2

kidney
kidney

Reputation: 3083

You can add a disabled valueless item like this:

<MenuItem value="" disabled>
    Placeholder
</MenuItem>

But the item will be displayed as an option. See https://material-ui.com/components/selects/#simple-select

Upvotes: 0

Related Questions