JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var SimpleList = React.createClass({
    onChange: function(e) {
        this.props.items.forEach(function(item) {
            if (item.title === e.target.value) {
                this.props.onChange(item);
            }
        }, this);
    },
    render: function() {
        var options = this.props.items.map(function(item) {
            return <option key={item.title} value={item.title}>{item.title}</option>;
        })
        return <select value={this.props.selected.title} onChange={this.onChange}>{options}</select>;
    }
});

var data = [
    {title: 'Apple', products: [{title: 'iPhone'}, {title: 'iPad'}, {title: 'MacBookPro'}]}, 
    {title: 'Toshiba', products: [{title: 'Qosmio'}, {title: 'Satellite'}]}
];

var App = React.createClass({
    getInitialState: function() {
        return {
            company: null,
            product: null
        };
    },
    componentWillMount: function() {
        this.onCompanyChange(data[0]);
    },
    onCompanyChange: function(company) {
        this.setState({
            company: company,
            product: company.products[0]
        });
    },
    onProductChange: function(product) {
        this.setState({product: product});
    },
    render: function() {
        return <div>
            <SimpleList selected={this.state.company} onChange={this.onCompanyChange} items={data} /> 
            <SimpleList selected={this.state.product} onChange={this.onProductChange} items={this.state.company.products} />
            
            <div>Company: {this.state.company.title}</div>
            <div>Product: {this.state.product.title}</div>
        </div>;
    }
})
React.renderComponent(<App />, document.body);