/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

19 votes187 views6 answers
React.js
Javascript React
3 votes175 views1 answer
White screen issue in react native splashscreen
Javascript React
0 vote237 views1 answer
React chunk file too large
Javascript React
0 vote241 views1 answer
React unfocus check
Javascript React
17 votes221 views5 answers
How to make apk react native
Javascript React
2 votes204 views2 answers
Property 'name' does not exist on type 'eventtarget' react
Javascript React
1 vote202 views1 answer
React native slow performance after load iamges
Javascript React
0 vote182 views1 answer
Hooks developed by react native
Javascript React
1 vote183 views1 answer
How to run an existing react project
Javascript React
1 vote195 views1 answer
Get current platform react native
Javascript React