react jsx - setState() not updating the View - reactjs -


good day guys,

i have started using reactjs project stuck in issue , can help. trying implement order management system orders pushed browser using websockets , reactjs view updated par data. there associated events handled on ui during interaction should update state of orders. since started using reactjs, decided hardcode dataset can see orders displayed on list. cant click on list , details of clicked item refresh view , show on allocated space, when application starts list of orders displayed no detail view shown in code below or http://jsfiddle.net/d5wvtyf0/. question how can make view update , show update making calling setstate() or maybe question doing wrong in code have already?

/*this container title on 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 component loads items on leftside of 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 productline details shown on righthand side of 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 container element 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 @ 2:30 - 11.06.2014                         </span>                     </div>                 </div>                      <hr />                                 {productrow}                     <hr />             </div>         );     } });  /**this main container houses on right hand side of 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'));

the setstate method working well... problem code , data. here have fiddle fixed.

https://jsfiddle.net/69z2wepo/8311/

your render function in productitemdetails making check length == 0 in object. although defined selectedorderitem in parentcontainer array, when updating state passing specific object (and product detail expecting array). plus, similar happening in productitemlinedetails (and dataset same regarding prices , product names, changed little bit can see works).


Comments

Post a Comment

Popular posts from this blog

Email notification in google apps script -

https://support.google.com/docs/answer/91588?hl=en i have sheet the cells filled in data pulled via apps script, website. pull in exact same data, not. on old sheets version use able emails when data "changes" different value. new sheets, email when new data pasted cells, though exact same data......and, can't set @ ranges anymore, entire document. there easy way watch cells when data changes, , email myself? this looks lot you're trying do. for checking whether value has changed after edit, this gives necessary information it. hence, know whether new value same 1 or not. implementing "workaround" talked in second link, able compare , send email myself if value changed. initiate onedit trigger goes off onedit function uses these lines after checks in place have passed. var email = "xyz@whatever.com"; mailapp.sendemail(email, "triggermail", "a change has occurred in sheet"); note: sends "notification...
Read more

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

javascript - IE11 incompatibility with jQuery's 'readonly'? -

the code i'm running has no issues in firefox, or chrome. user typing 1 textbox, tabs next , can continue typing that. when run webpage on ie11, user tabs next textbox , can't type in. textbox has double-clicked before user can insert anything. i've googled , seems ie give problems when using older jquery (i.e. prefers 'prop' 'attr' ). in code below jquery's readonly keyword being used in way ie11 no longer recognise/accept? i assume issue readonly , removeclass('ignore') working expected. //when focus on textbox 1 $("#field1").focus(function() { //remove readonly property textbox 1 $('#field1').prop('readonly', false).removeclass('ignore'); //add readonly property other textboxes $('#field2, #field3, #field4') .prop('readonly', 'readonly').addclass('ignore').val(''); }); i'm using jquery 2.1.3 ...
Read more