Chartjs-Display chart data based on API call

by

0👍

Oh, so I have added a conditional rendering to parent (Home) component. Render looks now like this:

<Card style={{ width: 400, marginLeft: '75px'}} title={'Balance trend'}>
{
   !!historicalBalanceValues ?
   <BalanceChart chartData={historicalBalanceValues}></BalanceChart> : <Spin/>
}
</Card>

So now I have infinite preloader (historicalBalanceValues is undefined), and even tough API call returns me an array with values it does not render my BalanceChart component. I think that conditional rendering is checked only once somehow. How can I achieve this to react on changes?

0👍

I have found solution and I did change both components to class components. I pass data between them using props and I use State to store data I have from back-end inside Home component. Thanks for help!

Leave a comment