EDIT: here is the answer
Found the answer... it's in fact very simple: just combine the parent and child. Both can make their ajax request:
The comment box would be:
var CommentBox = React.createClass({
loadCommentsFromServer: function() {...}
getInitialState: function() {...}
componentDidMount: function() {...}
render: function() {
return (
<div>
<Comment the_props={that.you.want} />
<Author userId={this.state.id.that.we.get.via.ajax.request} />
</div>
);
}
And the Author:
var Author = React.createClass({
loadAuthorFromServer: function() { // its own ajax request
$.ajax({
...
});
}
getInitialState: function() {...}
componentDidMount: function() {...}
render: function() {
return (
<div>
Hello i am {this.state.data.author} and this is my picture! <img src="{this.state.data.link}"/>
</div>
);
}
END OF EDIT
I try to combine two datasources in react js. Following the tutorial, I have something like
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
...
This obviously returns data from only one source.
I however have to combine the Comment object with its author. This requires a second query, which depends on the result of the first. In jQuery I could write
var queryComment = $.ajax({...});
queryComment.done(function(json){
$.each(json, function(key, comment) {
var queryAuthor = $.ajax({...});
queryAuthor.done(function(json){
comment.author = json;
});
});
});
I cannot find how to do it in the react documentation. My guess is I should create a reactjs Author object and use Composition (http://facebook.github.io/react/docs/multiple-components.html), but the examples are all static and use only the render function... Thank you very much!