JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var List = React.createClass({
    render: function() {
        var items = {
            color: ['Red', 'Green', 'Blue'],
            fruit: ['Apple', 'Banana', 'Orange']
        };
        var reactItems = items[this.props.type].map(function(item) {
            return <li>{item}</li>;
        }, this);
        return (
            <ul>{reactItems}</ul>
        );
    }
});
var Selector = React.createClass({
    render: function() {
        return (
            <select onChange={this.handleSelection} value={this.props.selected}>
                <option value="color">Color</option>
                <option value="fruit">Fruit</option>
            </select>
        );
    },
    
    getIsSelected: function(value) {
        return value == this.props.selected ? "selected" : "";
    },
    
    handleSelection: function(e) {
        this.props.onChange(e);
    }
});

var Container = React.createClass({ 
    getInitialState: function() {
        return {
            selected: 'fruit'
        }
    },
    
    render: function() {
        return (
            <div>
                <Selector
                  onChange={this.handleSelection} 
                  selected={this.state.selected} 
                />
                <List type={this.state.selected} />
            </div>
        );
    },
    
    handleSelection: function(e) {
        this.setState({selected: e.target.value});
    }
});

 
React.render(<Container />, document.body);