score:4
$.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'));
Source: stackoverflow.com
Related Query
- How to fix populating React components based on JSON response?
- How to sort list of React components based on different properties?
- How to render JSON response as dropdown list in React
- How to see axios error response JSON in React
- How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
- How to bundle ES6 based React components and keep the bundle in ES6, using webpack?
- How to create React components from a JSON array?
- How to show success or error message based on the response of the api in React js
- How to fix "Uncaught Error: Objects are not valid as a React child" when passing objects, obtained from the blockchain, to the children components
- How to recursively render React components based on a deeply nested array?
- How to dynamically render react components based on selected dropdown value
- How to use an oEmbed json response in my React App
- How to sort react components based on props being passed into it
- req.query from backend turns out to be json on React front end after deployed to heroku, how to fix it?
- How to render react components based on an ACL object?
- Rendering components based on response React JS
- How to build a simple chart in React based on data from API response
- How do you load React components asynchronously based on different server side states?
- How to parse a boolean from a JSON response in React
- How to map over a JSON response in React
- How to combine two json apis in react based on id
- How to Nesting React Components with JSON data
- How to checked checkbox using state in react in class based components
- React - Render dynamic components based on API response
- how can I use the JSON token Response returned by an endpoint to another .js file in React
- React JS: How can I export different components based on environment variable?
- How to make pure components in react js using functional approach i.e. non class based
- How to render components dynamically based on route name with React router
- How to render HTML Template as response from json in react js
- How to map a nested JSON response in React
More Query from same tag
- How to send unique props to similar Parents?
- how to make option selected by default in react
- Google react maps - how to change control color?
- Bootstrap stopped working with React
- fetch() URL data with Javascript React and display as string
- get index from click and set class to same index in another container in react component
- ReactJS: "this.props" is not a function when child component calls parent
- Cannot read property 'toLowerCase' of undefined - REACT - FIRESTORE
- Top level await gives error in build but works on dev
- Problem with React Router NavLink and activeClassName
- React : How to solve "System" is not defined
- How to pass redux state to sub routes?
- for of loop unable to loop through values of an object which has been treated as an array in reactjs
- Break the Object.keys loop based on count
- VM Exception while processing transaction: invalid opcode at PromiEvent
- Implement an Autocomplete Component in React-Typescript
- Accessing state after re-rendering - React
- Global Styles don't work on resetting the margins
- MomentJS with react languages
- Why eslint-plugin-react-hooks doesn't warn when using react hooks conditionally?
- How to render svg string as image in React?
- Mock document in Jest test file
- How to display data formatted by Draft.js in React?
- Document.createElement Download PDF Not working in IE
- What is wrong with my React.js code for blog comment feature
- How to check empty spaces in draft js Editor
- How to display specific img on li hover without get request in react?
- Cannot read property 'length' of undefined - React tutorial
- How to set focus to input after the element stops moving?
- Caching in Gatsby JS