/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 vote334 views1 answer
React native application architecture
Javascript React
1 vote196 views1 answer
React use callback
Javascript React
6 votes273 views1 answer
What is key in react
Javascript React
0 vote267 views3 answers
React router browser refresh
Javascript React
-1 vote263 views1 answer
React-native run-ios command
Javascript React
6 votes282 views2 answers
React native password field
Javascript React
0 vote260 views1 answer
Loop number in react
Javascript React
3 votes257 views1 answer
UseNav react router
Javascript React
1 vote280 views1 answer
Change react native app name
Javascript React
0 vote265 views1 answer
Implementing state lifecycle in react class component
Javascript React