React Simple Dropdown

A simple dropdown (select) component written in React using JSX. Takes and array of value/label pairs and displays a select. Optionally takes an 'onchange' function as a param. This will be called with details of the old and newly selected values.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="container"></div>

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<script>
  var options = [{
      description: 'This is option A',
      code: 'a'
    },
    {
      description: 'This is option B',
      code: 'b'
    },
    {
      description: 'This is option C',
      code: 'c'
    },
    {
      description: 'This is option D',
      code: 'd'
    }
  ];


  var dropDownOnChange = function(change) {
    alert('onChangeForSelect:\noldValue: ' +
      change.oldValue +
      '\nnewValue: ' +
      change.newValue);
  };

</script>

<script type="text/jsx">
  React.render(
  <Dropdown id='myDropdown' options={options} value='b' labelField='description' valueField='code' onChange={dropDownOnChange}/>, document.getElementById('container') );
</script>

CSS

/* 
This CSS, and the Bootstrap CSS library (in 'External Resources'), are not required and can safely be removed. They're only here to make the select less ugly and to show it can be styled in the same way as a 'regular' select.
*/

body {
  margin-top: 10px;
  margin-left: 10px;
}

select.form-control {
  width: 70%;
}

JavaScript 1.7

var Dropdown = React.createClass({

  propTypes: {
    id: React.PropTypes.string.isRequired,
    options: React.PropTypes.array.isRequired,
    value: React.PropTypes.oneOfType(
      [
        React.PropTypes.number,
        React.PropTypes.string
      ]
    ),
    valueField: React.PropTypes.string,
    labelField: React.PropTypes.string,
    onChange: React.PropTypes.func
  },

  getDefaultProps: function() {
    return {
      value: null,
      valueField: 'value',
      labelField: 'label',
      onChange: null
    };
  },

  getInitialState: function() {
    var selected = this.getSelectedFromProps(this.props);
    return {
      selected: selected
    }
  },

  componentWillReceiveProps: function(nextProps) {
    var selected = this.getSelectedFromProps(nextProps);
    this.setState({
      selected: selected
    });
  },

  getSelectedFromProps(props) {
    var selected;
    if (props.value === null && props.options.length !== 0) {
      selected = props.options[0][props.valueField];
    } else {
      selected = props.value;
    }
    return selected;
  },

  render: function() {
    var self = this;
    var options = self.props.options.map(function(option) {
      return ( <
        option key = {
          option[self.props.valueField]
        }
        value = {
          option[self.props.valueField]
        } > {
          option[self.props.labelField]
        } <
        /option>
      )
    });
    return ( <
      select id = {
        this.props.id
      }
      className = 'form-control'
      value = {
        this.state.selected
      }
      onChange = {
        this.handleChange
      } > {
        options
      } <
      /select>
    )
  },

  handleChange: function(e) {
    if (this.props.onChange) {
      var change = {
        oldValue: this.state.selected,
        newValue: e.target.value
      }
      this.props.onChange(change);
    }
    this.setState({
      selected: e.target.value
    });
  }

});