JSFiddle - React, Tailwind, and code Playground

by David Waterston

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 AssessmentTypes = [
        {
            label: 'Continuous Assessment',
            value: 1,
            categories: [
                {
                    label: 'Assignment',
                    value: 1
                },
                {
                    label: 'Case Study',
                    value: 2
                },
                {
                    label: 'Discussion',
                    value: 3
                },
                {
                    label: 'Dissertation',
                    value: 4
                },
                {
                    label: 'Group Project',
                    value: 5
                },
                {
                    label: 'Individual Project',
                    value: 6
                },
                {
                    label: 'Internship Report',
                    value: 7
                },
                {
                    label: 'Lab Exercise',
                    value: 8
                },
                {
                    label: 'Listening Test',
                    value: 9
                },
                {
                    label: 'Online Quiz',
                    value: 10
                },
                {
                    label: 'Oral Test',
                    value: 11
                },
                {
                    label: 'Portfolio/Log Book',
                    value: 12
                },
                {
                    label: 'Practical',
                    value: 13
                },
                {
       ...

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%;
    margin-bottom: 10px;
}

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;
        if (this.props.value === null && this.props.options.length !== 0) {
            selected = this.props.options[0][this.props.valueField];
        } else {
            selected = this.props.value;
        }
        return {
            selected: 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} 
                    name={this.props.id}
                    className='form-control' 
                    value={this.state.selected} 
            
                    onChange={this.handleChange}>
                {options}
            </select>
        )
    },

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

});



var TwoLinkedDropdowns = React.createClass({

    getInitialState:...