/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

3 votes109 views1 answer
React router yarn
Javascript React
3 votes109 views1 answer
React after deployment givin nginx 404
Javascript React
0 vote125 views1 answer
React native load function each time visit screen
Javascript React
1 vote105 views1 answer
Statusbar reactnati
Javascript React
3 votes97 views1 answer
How to go to another page onclick in react
Javascript React
6 votes111 views2 answers
TextInput disable react native
Javascript React
4 votes178 views3 answers
React native keystore
Javascript React
4 votes108 views1 answer
Read keyboard reactjs
Javascript React
9 votes57 views4 answers
Firebase' is not defined no-undef react
Javascript React
0 vote95 views2 answers
This.webview.postmessage is not a function reactnative
Javascript React