/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

71 votes435 views5 answers
Css react
Javascript React
105 votes392 views3 answers
React bootstrap do you need to import
Javascript React
0 vote325 views1 answer
React native webview disable touch
Javascript React
0 vote330 views1 answer
How to detect an element is been hovered in react
Javascript React
0 vote382 views1 answer
React.common.JavascriptException: Error: invalid host
Javascript React
0 vote338 views1 answer
React set state before render
Javascript React
0 vote367 views1 answer
Can i use hooks with expo in react native
Javascript React
0 vote368 views1 answer
What difference between react func and class components
Javascript React
0 vote333 views1 answer
Added font to react native
Javascript React
116 votes367 views6 answers
Bootstrap react
Javascript React