/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

18 votes380 views3 answers
Add material ui to react
Javascript React
1 vote354 views1 answer
React-native link to play store
Javascript React
0 vote375 views1 answer
React native regenerate android and ios folders
Javascript React
0 vote379 views1 answer
Align left text in reactstrap
Javascript React
2 votes345 views1 answer
Can't import react bootstrap
Javascript React
0 vote354 views1 answer
React json object pretty
Javascript React
0 vote373 views1 answer
External js doesn't works if revisit the page in react
Javascript React
0 vote375 views1 answer
Sort by attribute in reactjs
Javascript React
3 votes367 views2 answers
React focus
Javascript React
40 votes352 views4 answers
What does useref do react
Javascript React