MaterialSelect

MaterialSelect.js

var MaterialSelect = React.createClass({
  getInitialState: function() {
    return {
      open: false,
      inputValue: this.props.placeholder,
      options: this.props.options
    }
  },

  _triggerOpen: function() {
    this.setState({ open: true });
  },

  _triggerClose: function(index) {
    this.setState({
      open: false,
      inputValue: this.state.options[index]
    });
  },

  render: function() {
    var dropdownClass = this.state.open ? 'material-dropdown-menu open' : 'material-dropdown-menu';

    var roomList = this.state.options.map(function(room, i) {
      return <li key={i} onClick={this._triggerClose.bind(this, i)}>{room}</li>
    }.bind(this));

    return (
      <div className="material-button-group" >
        <span onClick={this._triggerOpen} className="material-input">{this.state.inputValue}</span>
        <ul className={dropdownClass} >
          { roomList }
        </ul>
        <input type="hidden" value={this.state.inputValue} />
      </div>
    );
  }
});