/Javascript/React/Render a react component only after API response is received

Render a react component only after API response is received

let component = () => {

let [chartData , setChartData ] = useState();
// an async API call that loads data into chartData state after successful response

return(
	{chartData && <QuoteChart chartData={chartData} iex={iex} />
	)
}


/* initially, chartData state will be undefined, thus the code block inside the 
return will evaluate to undefined ie. it will not be rendered. 
once the API response is received and charData will be assigned some real data, the component will rerender. 
this time, the code block will not evaluate to undefined. ie. the code block will render
*/

// for a more detailed discussion, read the below article 
https://daveceddia.com/watch-out-for-undefined-state/

Source: stackoverflow.com

Similar codes

0 vote154 views1 answer
React hooks link to external site
Javascript React
0 vote156 views1 answer
What is react mounting
Javascript React
0 vote139 views1 answer
ExoPlayer with auto linking react native
Javascript React
0 vote142 views1 answer
External js doesn't works if revisit the page in react
Javascript React
2 votes141 views1 answer
React select with react hook form cotroller
Javascript React
-2 votes152 views1 answer
2 taps is required to close keyboad in react native
Javascript React
16 votes90 views1 answer
How to insern an image in react
Javascript React
0 vote155 views1 answer
React this.state.selectedDays.toLocaleDateString is not a function
Javascript React
0 vote173 views2 answers
React native: how to know th softkey height
Javascript React
0 vote151 views1 answer
Plotly react
Javascript React