React render API data on client side - ajax

Question

I try to fetch some API data and render on Client side. But I do not understand how should I proceed. I'm quite new to react. So I have been creating a React component which fetches api data but on render I do not have any list generated
on page load the api loads some initial data in form of nested object
than the component should parse this results child node which has about 10 elements
var Panel = ReactBootstrap.Panel;
var ProductBox = React.createClass({
getInitialState: function() {
return {
data: [],
products:[]
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var products = jQuery.parseJSON(result);
if (this.isMounted()) {
this.setState({
products:products.productItems.productItem
});
}
}.bind(this));
},
render: function() {
console.log(this.props.products);
return (
<div className="ProductBox">
<div>
<Panel header={this.state.products.name}>
<img className="img-responsive" src="{this.state.image}"/>
</Panel>
</div>
</div>
);
}
});
React.render(
<ProductBox source="/my/api" />,
document.getElementById('content')
);

Answer 1

You should realy not create a whole new component just for your ajax requests as you will have to rewrite/duplicate the component In every part of your application where there is ajax.
A better solution would be to create a module that handles get,post etc and then require it and using it from all over the application.

Answer 2

When you set the state, you are doing it wrong.
$.get(this.props.source, function(result) {
var products = jQuery.parseJSON(result);
if (this.isMounted()) {
this.setState({
products:productItems.productItem
});
}
}.bind(this));
productItems is not defined there. It should be products correct? Because you are doing var products = jQuery.parseJSON(result);.