reactjs - React JS 2 calls same component -

i'm new react , i'm trying loop on set of json objects using .map. 2 json calls using ajax , loop on first.

basically loop on data first call, , include second call data in same map loop.

example (blue = first call, red = second call):

so image above generated code below, while this.props.data result of first ajax call:

var firstline = this.props.data.map(function(metric) {     if(metric.line == 1) {       return (             <firstlinebox name={metric.name} key={metric.name} value={metric.value} />       );     } });  

and firstlinebox

var firstlinebox = react.createclass({   render: function() {     return (         <div classname="col-md-3 col-xs-6 text-center">             <p classname="leading-stats-number"><i classname="fa fa-users"></i> {this.props.value}</p>             <p classname="pages-number-compare"><small><i classname="fa fa-arrow-circle-up"></i> compare</small></p>             <p classname="pages-number-text"><small>{this.props.name}</small></p>                    </div>     );   } }); 

all until here, goal have result of second call inside red highlighted zone in image, like:

var firstlinebox = react.createclass({   render: function() {     return (         <div classname="col-md-3 col-xs-6 text-center">             <p classname="leading-stats-number"><i classname="fa fa-users"></i> {this.props.data.value}</p>             <p classname="pages-number-compare"><small><i classname="fa fa-arrow-circle-up"></i> {this.props.data_compare.value}</small></p>             <p classname="pages-number-text"><small>{this.props.data.name}</small></p>                       </div>     );   } }); 

is achievable? can control response of json , merging calls 1 possible, prefer have react handling separately.

so problem solved: it's not possible accomplish trying do.

the way solved doing 2 calls beforehand, merge , loop it.

other way individual calls inside loop it's not option in case.

thanks all.