1

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!

Raphael
  • 1,709
  • 2
  • 17
  • 27

0 Answers0