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'));
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
- Using material-UI tabs with react
- Cannot read property 'company' of null
- Why doesn't this.props.children.map work?
- Dynamic form only shown on refresh
- Integrating Symfony security and other template utilities with ReactJS
- React - Event handling on mapped button
- How to check Next-Js component state?
- OnClick Function does not work on Chrome?
- React form values not being displayed on form submission
- How to call my web scraper from within an express route?
- Creating show and hide sections with buttons in reactjs
- Api call in render method of reactjs
- FirebaseErrorr: Missing or insufficient permissions happens, When trying to get snapShot
- Return HTML file using Adonisjs Router
- React component is not being rendered
- How to simulate window.location change with react-testing-library
- how to get in between months and year in react js?
- React: Calling a function inside a map function
- Toggle modal in React
- React build showing blank page
- Why cant I separate <Switch> to a different module?
- TypeError: Cannot read property 'value' of undefined in my React App
- ReactJS Test - fsevents is not a function
- Can you subscribe certain parts of a state in Zustand?
- Private route using React, React Hooks
- Re-sizing Google chart in react rnd
- indexing between states in react
- unexpected token using `` in jsx
- Semantic-UI / ReactJS | Use DropDown as group
- Enable Cors NetCore React frontend