JSFiddle - React, Tailwind, and code Playground

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>

<div id='example'></div>

JavaScript 1.7

var CategoryList = React.createClass({

	getInitialState:function(){
		return {
			items:[
				["cat1", false],
				["cat2", true]
			],
			lastToggled:["cat2"]
		}
	},
    
    //Function passed to child (changes items state)
	handleClick:function(child){
		var tempItems = this.state.items;
		if(this.state.lastToggled[0] === child.props.name){
			var index = this.getInd(this.state.tempItems, child.props.name);
			tempItems[index][1] = !tempItems[index][1];

			this.setState({items: tempItems});
		}else{
			var newIndex = this.getInd(this.state.tempItems, child.props.name);
			tempItems[newIndex][1] = !tempItems[newIndex][1];

			var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]);
			tempItems[oldIndex][1] = false;

			this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]});

		}
	},
    
    //getInd not relevant to problem
	getInd:function(arr, elname){
		for (var i = arr.length - 1; i >= 0; i--) {
			if(arr[i][0] === elname){
				return i;
			}
		};
		return -1;
	},

	render:function(){
		return (<ul className="category-list">
			{
				this.state.items.map(function(item){
					return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
				})
			}
			</ul>)
	}

});


var Category = React.createClass({

	render:function(){
		if(this.props.selected){
			return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>);
		}else{
			return (<li onClick={this.propogateClick}>{this.props.name}</li>);
		}
	},

	propogateClick: function(){
		this.props.onClick(this);
	}

});


React.renderComponent(<CategoryList/>, document.getElementById('example'));