SetState () does not update View - reactjs
Good afternoon guys,
I just started using Reactjs for a project but am stuck with this issue and can do with some help. I am trying to implement an order management system where orders are pushed to the browser using websockets and then the reactjs view is updated as a data pair. During the interaction, there are related events that are processed in the user interface, which should update the state of orders. Since I just started using Reactjs, I decided to hard-code my dataset so that I can see the Orders displayed in the list. However, I am unable to click on the list and get information about that clicked item to refresh the view and display its allocated space, when the app starts, only the Orders list is displayed without a detailed view as shown in the code below.or fromhttp://jsfiddle.net/d5wvtyf0/ . So the question is, how can I update the view and show the update generated by the call to setState (), or maybe the question is, what am I doing wrong in the code I already have?
/*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)
}
</div>
<OrderItemsTitle title_text='In Progress' />
<div className='in_progress_container'>
{
filteredInProgressOrderItem.map(function(orderitem, i){
return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this,
orderitem)} orderitem={orderitem}/>
}, this)
}
</div>
<OrderItemsTitle title_text='Ready' />
<div className='ready_container'>
{
filteredReadyOrderItem.map(function(orderitem, i){
return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this,
orderitem)} orderitem={orderitem}/>
}, this)
}
</div>
</div>
);
}
});
/*This is the productline details that is shown on the righthand side of the OMS*/
var ProductItemLineDetails = React.createClass({
render: function(){
return (
<p>
<span className="pull-right">
<strong>{this.props.productItem.productItemPrice}</strong>
</span>
<span className="text-muted">
<strong>{this.props.productItem.productItemName}</strong>
</span>
</p>
);
}
});
/*This is the container element for ProductItemLineDetails above*/
var ProductItemDetails = React.createClass({
render: function(){
console.log("this.props.orderitem.length = ", this.props.orderitem.length);
var productRow;
if (this.props.orderitem.length === 0){
productRow = "";
}
else {
productRow = this.props.orderitem.products.map(function(product, i){
return <ProductItemLineDetails key={i} productItem={product} />
});
console.log("productRow = ", productRow);
}
return (
<div>
<div className="media">
<small className="pull-right">
23h ago
</small>
<div className="media-body">
<h4 className="media-heading">
Bruno Otas
</h4>
<span className="text-muted">
(234)-8087616915
</span>
<br />
<span className="text-muted">
2 days ago at 2:30 am - 11.06.2014
</span>
</div>
</div>
<hr />
{productRow}
<hr />
</div>
);
}
});
/**This is the main container that houses everything on the right hand side of the view**/
var DetailViewOrderItemsContainers = React.createClass({
render: function() {
return (
<div className="rightContainer">
<ProductItemDetails orderitem={this.props.selectedorderitem} />
</div>
);
}
});
var ParentContainer = React.createClass({
getInitialState: function(){
return {
selectedorderitem: []
}
},
handleUserInput: function(orderitem){
this.setState({
selectedorderitem: orderitem
});
console.log("setstate hit", this.state.selectedorderitem);
console.log("setstate order", orderitem);
},
render: function(){
return (
<div className="parentContainer">
<ListViewOrderItemsContainer orderitems={this.props.orderitems}
onUserInput={this.handleUserInput}
selectedorderitem={this.state.selectedorderitem} />
<DetailViewOrderItemsContainers selectedorderitem={this.state.selectedorderitem} />
</div>
);
}
});
//var inProgressOrderDetails = [
var orderitems = [
{id: "2942934-343323-234242234-23423",status: 'new', time: "2", image_url: "/assets/images/profile_small.jpg", cust_name: "Nnamdi Jibunoh", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] },
{id: "2942934-343323-234242234-23424",status: 'new', time: "3", image_url: "/assets/images/profile_small.jpg", cust_name: "Adeolu Adamu", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] },
{id: "2942934-343323-234242234-23425",status: 'in_progress', time: "4", image_url: "/assets/images/profile_small.jpg", cust_name: "Alaku Ishienyi", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] },
{id: "2942934-343323-234242234-23426",status: 'ready', time: "5", image_url: "/assets/images/profile_small.jpg", cust_name: "Ogochukwu Maduabum", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] },
{id: "2942934-343323-234242234-23427",status: 'ready', time: "6", image_url: "/assets/images/profile_small.jpg", cust_name: "Bruno Otas", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] },
];
React.render(<ParentContainer orderitems = {orderitems} />, document.getElementById('react_body'));
source to share
The setState method works well ... Is the problem with your code and your data. Here you have a fixed Fiddle.
https://jsfiddle.net/69z2wepo/8311/
Your render function in was ProductItemDetails
doing a length check == 0 on what is an object. Although you defined selectedorderitem
in your ParentContainer as an array, when you update the state you are passing in a specific object (and your product details expected an array). Also, something like this was happening in yours ProductItemLineDetails
(and the dataset is all the same regarding prices and product names, so I modified it a bit so you can see it works).
source to share
Perhaps this is because you are logging the state prior to actually updating it:
handleUserInput: function(orderitem){
this.setState({
selectedorderitem: orderitem
});
console.log("setstate hit", this.state.selectedorderitem);
console.log("setstate order", orderitem);
}
Should be:
handleUserInput: function(orderitem){
this.setState({
selectedorderitem: orderitem
}, function() {
console.log("setstate hit", this.state.selectedorderitem);
console.log("setstate order", orderitem);
})
}
source to share