Error when updating ReactJS state with complex object -

when like:

getinitialstate: function() {   return { previews: [], isloading: true, error: "", nextcursor: "" }; }, componentdidmount: function(){   $.ajax("/my-url", {     method: "get",     success: this.previewsreceived,     failure: this.previewsfailedtoreceive   }); }, previewsreceived: function(previews){   var tmpstate =  { isloading: false, previews: previews.data, nextcursor: previews.next_cursor, error: "" };   this.setstate(tmpstate); },  previewsfailedtoreceive: function(_){   this.setstate(object.assign({}, this.state, { error: "", isloading: false, previews: [], nextcursor: "" })); }, 

i following reactjs error:

uncaught [object object] 

on line 1093 in react.js library (in method invariant).

if not passing complex object (inside previews data) state however, not error.

any idea doing wrong?

edit: here whole component, addressing first answer, still same errors.

var creatives = react.createclass({   getinitialstate: function() {     return { previews: [], isloading: true, error: "", nextcursor: "" };   },   componentdidmount: function(){     $.ajax("/my-url, {       method: "get",       success: this.previewsreceived.bind(this),       failure: this.previewsfailedtoreceive.bind(this)     });   },   previewsreceived: function(previews){     var tmpstate =  { isloading: false, previews: previews.data, nextcursor: previews.next_cursor, error: "" };     this.setstate(tmpstate);   },    previewsfailedtoreceive: function(_){     this.setstate({ error: "", isloading: false, previews: [], nextcursor: "" });   },    render: function() {     return <ul>       {this.state.previews.map(function(creative) {         return <li key={creative.tweet_id} style="width: 450px">           <input type="checkbox" style="float:left;margin-top: 10px" />           <creativepreview creative={creative} /></li>;         })       }       </ul>;   } }); 

i following warning when call bind:

warning: bind(): binding component method component. react automatically in high-performance way, can safely remove call. see creatives 

edit2: found out removing of render method 'fixes' error. gonna post definition of component too:

var creativepreview = react.createclass({   render: function() {     return <iframe         id={ 'iframe-tweet-id-'+ this.props.creative.tweet_id }         dangerouslysetinnerhtml={this.props.creative.preview}>     </iframe>;   } }); 

i don't think dangerouslysetinnerhtml works want on <iframe> elements.

you can populate directly creating ref <iframe> element:

var creativepreview = react.createclass({   componentdidmount: function(){     var frame = react.finddomnode(this.refs.myframe);     frame.document.body.innerhtml = this.props.creative.preview;   },   render: function() {     return <iframe ref='myframe' />;   } }); 

the error in creativepreview. try remove see if fixes problem.

side note: object.assign() calls unnecessary react's setstate. setstate method automatically merge current state.

edit: seems react auto-bind this component functions.

edit 2: can see creativepreview.