score:4

Accepted answer

$.getjson is asynchronous, so your callback has not been executed when you use prices in the react.render method. a better approach is to make the component itself responsible for the call, and store the returned prices in its state with the callback. e.g.

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'));

on an unrelated note, it is generally unnecessary to use jquery within a react application. if you are only using it for your ajax calls, then you can either use the browser fetch api with a polyfill for unsupported browsers, or a much more lightweight library, such as axios.

score:1

the problem with your code is the react component doesnt render when your data is received, it only renders when reactdom.render is called and prices is an empty array at that time

so do this

// 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