/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 vote364 views1 answer
Dull or blur a background image in react native
Javascript React
0 vote406 views3 answers
Play sound onload react
Javascript React
0 vote369 views1 answer
React native firebase login with facebook
Javascript React
0 vote346 views1 answer
React open on different url instead of localhost
Javascript React
4 votes371 views2 answers
React materilize
Javascript React
0 vote366 views2 answers
React date picker disable past dates
Javascript React
0 vote385 views1 answer
Change value in array react
Javascript React
0 vote369 views2 answers
How to give data from react native to webview
Javascript React
0 vote401 views1 answer
React js Property 'Select' does not exist on type 'Form'.ts(2339) an
Javascript React
0 vote353 views1 answer
Ityped react
Javascript React