React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="react_body"></div>

JavaScript 1.7

/*This is a container for the title on the lefthand side - In Progress/Ready etc*/
var OrderItemsTitle = React.createClass({
    render: function(){
        return(
            <p className="row-progress">{this.props.title_text}</p>
        );
    }
});

OrderItemButtons = React.createClass({
	render: function(){
        return(
            <a href="javascript:void(0)" className="row-order" onClick={this.props.handleClick}>
                
                <span className="txt">{this.props.orderitem.cust_name}</span>
                <span className="status">{this.props.orderitem.time}</span>
            </a>
        );
    }
});

/*This is the component that loads the items on the leftside of the screen*/
var ListViewOrderItemsContainer = React.createClass({
	handleClick: function(orderitem){
		this.props.onUserInput(orderitem);
        //console.log(this.props.selectedorderitem);
    },
    render: function(){
        var filteredNewOrderItem = this.props.orderitems.filter(function(orderitem){
        	return orderitem.status.toLowerCase().search('new') !== -1;
        });
        var filteredReadyOrderItem = this.props.orderitems.filter(function(orderitem){
        	return orderitem.status.toLowerCase().search('ready') !== -1;
        });
        var filteredInProgressOrderItem = this.props.orderitems.filter(function(orderitem){
        	return orderitem.status.toLowerCase().search('in_progress') !== -1;
        });
        

        return(
            <div className='leftContainer'>
                <OrderItemsTitle title_text='New' />
                <div className='new_progress_container'>
	                {
	                	filteredNewOrderItem.map(function(orderitem, i){
	                		return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this,
	                			orderitem)} orderitem={orderitem} selectedorderitem={this.props.selectedorderitem} />
	                	}, this)
	                }
	            </div>    
               ...