Reactjs Issue
Issue with Reactjs setState
HTML
<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="react_body"></div>
JavaScript
/*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}>
<img src={this.props.orderitem.image_url} />
<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)
}
...