Update Rendered Component Prop Value Async - reactjs

Question

I creating a couple of lists items with financial data and I want to display a mini graph on the side using react-sparklines.
So I'm trying to fetch the graph data when mapping the array since retrieving the data could take some time but it seems I can't get the graph component to update the prop value correctly.
How can I update the prop data in the Sparklines component once the data has been retreived from fetch?, is it possible?.
Here's a sample of my code
class CurrencyList extends Component {
currencyGraph(symbol) {
return fetch(baseURL, {
method: 'POST',
headers: {
'Authorization': 'JWT ' + token || undefined, // will throw an error if no login
},
body: JSON.stringify({'symbol': symbol})
})
.then(handleApiErrors)
.then(response => response.json())
.then(function(res){
if (res.status === "error") {
var error = new Error(res.message)
error.response = res.message
throw error
}
return res.graph_data
})
.catch((error) => {throw error})
}
render () {
topCurrencies.map((currency,i) => {
return (
<ListItem key={i} button>
<Sparklines data={this.currencyGraph(currency.symbol)} >
<SparklinesLine style={{ stroke: "white", fill: "none" }} />
</Sparklines>
<ListItemText primary={currency.symbol} />
</ListItem>
)
})
}
}

Answer 1

I would wrap this component with my own component and accept the data as props.
In the parent component i will render the list only when i have the data ready and pass each component the relevant data on each iteration.
Here is a running small example
const list = [
{
key: 1,
data: [5, 10, 5, 20]
},
{
key: 2,
data: [15, 20, 5, 50]
},
{
key: 3,
data: [1, 3, 5, 8]
}
];
class MySparklines extends React.Component {
render() {
const { data } = this.props;
return (
<Sparklines data={data} limit={5} height={20}>
<SparklinesLine style={{ fill: "#41c3f9" }} />
</Sparklines>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dataList: []
}
}
componentDidMount() {
setTimeout(() => {
this.setState({ dataList: list });
}, 1500);
}
renderCharts = () => {
const { dataList } = this.state;
return dataList.map((d) => {
return(
<MySparklines key={d.key} data={d.data} />
);
})
}
render() {
const { dataList } = this.state;
return (
<div>
{
dataList.length > 0 ?
this.renderCharts() :
<div>Loading...</div>
}
</div>
);
}
}

Answer 2

You can't return data from an asynchronous function like that. Instead, when your load request completes, set the data in the state which will trigger the component to render. Note that in the test case below, it renders a placeholder until the data is ready.
Item = props => <div>{props.name}</div>;
class Test extends React.Component {
state = {
data: ''
}
componentDidMount() {
// Simulate a remote call
setTimeout(() => {
this.setState({
data: 'Hi there'
});
}, 1000);
}
render() {
const { data } = this.state;
return data ? <Item name={this.state.data} /> : <div>Not ready yet</div>;
}
}
ReactDOM.render(
<Test />,
document.getElementById('container')
);
Fiddle