JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

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

JavaScript 1.7

/** @jsx React.DOM */


// NOTE :: Removed store/flux implementation for simplicity
var channels = [
	{id: 1, name: 'JavaScript'},
	{id: 2, name: 'Cars'},
	{id: 3, name: 'Superheroes'}
];

var App = React.createClass({
	getInitialState: function() {
		return {
			channels: channels,
			currentChannelId: null, // The currently selected channel from <select />
			channelNameValue: '' // The currently entered text in refs.channelNameInput
		};
	},

	componentDidUpdate: function(prevProps, prevState) {

		// Focus on the relevant input, if "Create new" has been selected.
		if(prevState.currentChannelId !== 'new' && this.state.currentChannelId === 'new') {
			this.refs.channelNameInput && this.refs.channelNameInput.getDOMNode().focus();
		}

	},

	render: function() {
		return (
			<div>

				<form>
					<select value={this.state.currentChannelId} onChange={this._onChannelChange}>
						{this.state.channels.map(function(channel) {
							return <option value={channel.id}>{channel.name}</option>;
						})}
						<option value="new">Create new&hellip;</option>
					</select>
				</form>

				{this.state.currentChannelId === 'new' &&
					<form onSubmit={this._onNewChannelSubmit}>
						<label>Channel name</label>
						<input type="text" ref="channelNameInput" value={this.state.channelNameValue} onChange={this._onChannelNameInputChange} />
						<button type="submit">Add</button>
					</form>
				}

			</div>
		);
	},
	_onChannelChange: function(event) {
		var isNewChannel = event.currentTarget.value === 'new';
		this.setState({
			channelNameValue: '',
			currentChannelId: isNewChannel ? 'new' : parseInt(event.currentTarget.value, null)
		});
	},

	_onChannelNameInputChange: function(event) {
		this.setState({
			channelNameValue: event.currentTarget.value
		});
	},

	_onNewChannelSubmit: function(event) {
		event.preventDefault();

		var newChannel = {
			id: Date.now().valueOf(), // Unique ID
			name:...