score:4

Accepted answer 
var App = React.createClass({
   getInitialState() {
     return {
       priceData: []
     }
   },

   componentWillMount() {
     const apiUrl = "http://www.asterank.com/api/asterank?query={%22neo%22:{%22$lt%22:%22Y%22},%20%22price%22:{%22$gt%22:100000000}}&limit=1000";

     $.getJSON(apiUrl, data => {
        this.setState({
           priceData: data.map(item => item.price)
        });
      });    
   },

   render() {
     return(
       <div className="app">
         <div>
           {this.state.priceData.map(p => <PriceColumn price={p} />)}
         </div>
       </div>
     )
  }
});

var PriceColumn = React.createClass({
  render() {
    return(
    <div>
        <h4>{this.props.price}</h4>
    </div>
    )
  }
})

ReactDOM.render(<App />, document.getElementById('container'));

score:1 

// you can use promises too instead of simply a callback argument
fetchPrices(callback) {
  $.getJSON("<api_endpoint>", function(data) {
    var result = Object.keys(data).map(function(key) {
      return data[key].price;
    });

    callback(result);
  });
}

var App = React.createClass({
   getInitialState: function() {
     return { prices: [] };
   },
   componentDidMount() {
     fetchPrices(function(result) {
       this.setState({ prices: result });
     });
   },
   render() {
     return (
       <div className="app">
         <div>
           {this.props.priceData.map(p => <PriceColumn price={p} />)}
         </div>
       </div>
     );
   }
});

var PriceColumn = React.createClass({
  render() {
    return(
    <div>
        <h4>{this.props.price}</h4>
    </div>
    )
  }
})

ReactDOM.render(<App priceData={prices}/>, document.getElementById('container'));

Related Query

More Query from same tag