Error when updating ReactJS state with complex object - reactjs

Question

When I do something 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 get the following reactJS error:
Uncaught [object Object]
on line 1093 in the react.js library (in the method invariant).
If I am not passing any complex object (inside my previews data) to the state however, I do not get the error.
Any idea about what I am doing wrong?
Edit: Here is the whole component, addressing the first answer, I still get the 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 also get the following warning when I call bind:
Warning: bind(): You are binding a component method to the component.
React does this for you automatically in a high-performance way,
so you can safely remove this call. See Creatives
Edit2: I found out that removing most of the render method 'fixes' the error. So I am gonna post the definition of that 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>;
}
});

Answer 1

I don't think dangerouslySetInnerHtml works like you want it to on <iframe> elements.
You can populate it directly by creating a ref to your <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 is most likely in CreativePreview. Try to remove it to see if it fixes your problem.
Side note: Object.assign() calls are unnecessary with React's setState. The setState method will automatically merge with the current state.
EDIT:
It seems that React will now auto-bind this for component functions.
EDIT 2:
Now we can see CreativePreview.

Answer 2

There were several errors in my code:
Inline class and style in html tags were assuming actual html conventions and not jsx format.
The iframe was very hard to implement in reactJS. I found a workaround inspired from https://github.com/ryanseddon/react-frame-component but since it didn't work out of the box, I used vanilla Javascript in it:
--
var CreativeFrame = React.createClass({
render: function() {
var style = { width: '420px', border: 'none', height: '280px' };
return <iframe
style={style}
className="tweet-content"
id={ "iframe-tweet-id-" + this.props.creative.tweet_id }>
</iframe>;
},
componentDidMount: function() {
this.renderFrameContents();
},
renderFrameContents: function() {
// Proof that good old Javascript >> Any library
var iframe = document.getElementById("iframe-tweet-id-" + this.props.creative.tweet_id);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.innerHTML = this.props.creative.preview;
},
componentDidUpdate: function() {
this.renderFrameContents();
},
componentWillUnmount: function() {
var doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc) {
ReactDOM.unmountComponentAtNode(doc.body);
}
}
});
If anybody knows about improvements on it, let me know.