JSFiddle - React, Tailwind, and code Playground

by brian

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 Demo = React.createClass({

	selectOptions: {
		food: ['apple', 'pizza', 'hotdog'],
		places: ['New York', 'California', 'Texas'],
        planets: ['Mars', 'Venus', 'Earth']
	},

    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
    	return {
    		select: 'food'
    	};
    },

    render: function() {
        return (
            <div>
            	<select valueLink={this.linkState('select')}>
            		{this.renderOptions(Object.keys(this.selectOptions))}
        		</select>
        		<select>
        			{this.renderOptions(this.selectOptions[this.state.select])}
    			</select>
            </div>
        );
    },

    renderOptions: function (optionsArray) {
    	return optionsArray.map(function (option) {
    		return <option value={option}>{option}</option>;
    	});
    }
});
 
React.render(<Demo />, document.body);