JSFiddle - React, Tailwind, and code Playground

by claudeprecourt

HTML

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

CSS

div.selected {
    color: red;
}

JavaScript 1.7

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var App = React.createClass({
	render: function() {
		return (
			<Group ref="buttonGroup">
				<Button key={1} name="Component A"/>
				<Button key={2} name="Component B"/>
				<Button key={3} name="Component C"/>
			</Group>
		);
	}
});

var Group = React.createClass({
	getInitialState: function() {
		return {
			selectedItem: null
		};
	},

	selectItem: function(item) {
		this.setState({
			selectedItem: item
		});
	},

	render: function() {
		var selectedKey = (this.state.selectedItem && this.state.selectedItem.props.key) || null;
		var children = this.props.children.map(function(item, i) {
			var isSelected = item.props.key === selectedKey;
			return React.addons.cloneWithProps(item, {
				isSelected: isSelected,
				selectItem: this.selectItem,
				key: item.props.key
			});
		}, this);

		return (
			<div>
				<strong>Selected:</strong> {this.state.selectedItem ? this.state.selectedItem.props.name : 'None'}
				<hr/>
				{children}
			</div>
		);
	}

});

var Button = React.createClass({
	handleClick: function() {
		this.props.selectItem(this);
	},

	render: function() {
		var selected = this.props.isSelected;
		return (
			<div
				onClick={this.handleClick}
				className={selected ? "selected" : ""}
			>
				{this.props.name} ({this.props.key}) {selected ? "<---" : ""}
			</div>
		);
	}

});


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