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.