Basic React Select

Select.js

"use strict";

var React = require('react');

var Select = React.createClass({

    propTypes: {
        name: React.PropTypes.string.isRequired,
        label: React.PropTypes.string.isRequired,
        onChange: React.PropTypes.func.isRequired,
        options: React.PropTypes.array,
        value: React.PropTypes.any,
        error: React.PropTypes.string
    },

    render: function () {

        var options = this.props.options.map(function (value) {
            return <option key={value.id} value={value.id}>{value.name}</option>
        })

        var wrapperClass = 'form-group';
        if (this.props.error && this.props.error.length > 0) {
            wrapperClass += " " + 'has-error';
        }

        return (
            <div className={wrapperClass}>
                <label htmlFor={this.props.name}>{this.props.label}</label>
                <div className="field">
                    <select name={this.props.name}
                            className="form-control"
                            ref={this.props.name}
                            value={this.props.value}
                            onChange={this.props.onChange}>{options}</select>
                    <div className="input">{this.props.error}</div>
                </div>
            </div>
        );
    }
});

module.exports = Select;