Set a placeholder value to Select component Material UI v1.0.0-beta.24

Question

I'm using in a test project the v1.0.0-beta.24 from Material UI, the "Dropdown" menus work different from the previous version so what I want to do is to set like a placeholer in the Select component.

In my example with a previous versión I had this:

<DropDownMenu
  value={this.state.DivisionState}
  onChange={this.handleChangeDivision}>
  <MenuItem value={''} primaryText={'Select division'} />
  {this.renderDivisionOptions()}
</DropDownMenu>

So in the new version the primaryText property is not supported, this is my code:

import React from 'react';
import Select from 'material-ui/Select';
import {MenuItem, MenuIcon} from 'material-ui/Menu';
import {DatePicker} from 'material-ui-pickers';
import { FormControl } from 'material-ui/Form';
import { InputLabel } from 'material-ui/Input';


import cr from '../styles/general.css';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      DivisionData: [],
      DivisionState: '',

    };
    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
    this.handleChangeDivision = this.handleChangeDivision.bind(this);

  }
  componentDidMount() {
    const divisionWS = 'http://localhost:8080/services/Divisions/getAll';

    fetch(divisionWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          DivisionData: findResponse.divisions,
        });
      });

  }
  handleChangeDivision(event, index, value) {
    this.setState({ DivisionState: event.target.value});

  }
  renderDivisionOptions() {
    return this.state.DivisionData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.divDeptShrtDesc}>
          {dt.divDeptShrtDesc}

        </MenuItem>
      );
    });
  }
  render() {
    return (

      <div className={cr.container}>
        <div className={cr.containerOfContainers}>
          <div className={cr.inputContainer}>
            <div className={cr.rows}>
              <div>
                <div>
                  <FormControl>
                    <InputLabel htmlFor="name-multiple">Division</InputLabel>
                      <Select
                        value={this.state.DivisionState}
                        onChange={this.handleChangeDivision}
                        autoWidth={false}
                      >
                        {this.renderDivisionOptions()}
                      </Select>
                  </FormControl>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    );
  }
}

So any help on this would be nice.

Regards.

Have this.state.divisionState = 'your placeholder text'. Or create a custom this.state.placeholderText: 'example input', and conditionally use it if DivisionData is empty — Gavin Thomas
Hi, thanks for your time. The thing is that is not empty, the select is populated with a Web Service that is loaded when I run the app... — kennechu
Above your .map, but still inside that function hard code a single menu item to be used as a placeholder... <MenuItem key={333} value={this.state.placeholder}> 'placeholder text' </MenuItem> — Gavin Thomas

Ken Gregory Ken Gregory · Accepted Answer · 2017-12-19T00:57:48

You're using InputLabel with htmlFor="name-multiple", but there is no input with that name. You need to provide one by setting the input prop on Select:

  <FormControl>
    <InputLabel htmlFor="name-multiple">Division</InputLabel>
      <Select
        value={this.state.DivisionState}
        onChange={this.handleChangeDivision}
        autoWidth={false}
        input={<Input id="name-multiple" />}
      >
        {this.renderDivisionOptions()}
      </Select>
  </FormControl>

You can see this in action on the Simple Selects demo for the Select component.

Set a placeholder value to Select component Material UI v1.0.0-beta.24

3 Answers