JSFiddle - React, Tailwind, and code Playground

by NV

HTML

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

JavaScript 1.7

/**
 * @jsx React.DOM
 */
var UnitsSelect = React.createClass({
	getInitialState: function() {
		return {
			x: 'px',
			y: '%',
			z: 'em'
		};
	},
	VALUES: ['px', '%', 'em'],
	render: function() {
		return <div>
			<Select2 values={this.VALUES} parent={this} path="x"/> {this.state.x} <br/>
			<Select2 values={this.VALUES} parent={this} path="y"/> {this.state.y} <br/>
			<Select2 values={this.VALUES} parent={this} path="z"/> {this.state.z} <br/>
		</div>;
	}
});


var Select2 = React.createClass({
	render: function() {
		return <select onChange={this.onChange} value={this.pullValue()}>
			{this.renderOptions()}
		</select>;
	},
	renderOptions: function() {
		return this.props.values.map(function(item) {
			return <option value={item}>{item}</option>
		})
	},
	pullValue: function() {
		return this.props.parent.state[this.props.path];
	},
	onChange: function(e) {
		var value = e.target.value;
		var newState = {};
		newState[this.props.path] = value;
		this.props.parent.setState(newState);
	}
});


React.renderComponent(
	<UnitsSelect/>,
	document.body
);