/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 vote155 views1 answer
Added font to react native
Javascript React
0 vote214 views1 answer
Make a ReactNative component take the height and width of the current window
Javascript React
19 votes177 views6 answers
React native build android apk
Javascript React
0 vote169 views1 answer
React native set variable key in loop
Javascript React
0 vote157 views1 answer
Firebase timestamp to date react
Javascript React
0 vote172 views1 answer
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Styles.m aincont')
Javascript React
0 vote171 views1 answer
Ui5 React bind element
Javascript React
2 votes186 views2 answers
Vscode react extensions
Javascript React
0 vote197 views1 answer
React check if array contains value
Javascript React
0 vote183 views1 answer
React native dynamic style
Javascript React