/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

1 vote216 views1 answer
Disable split screen react native
Javascript React
-1 vote218 views2 answers
React native Platform
Javascript React
0 vote214 views1 answer
Auto scroll to view react-native
Javascript React
-1 vote200 views3 answers
Divider in react native
Javascript React
1 vote229 views3 answers
Npm update react
Javascript React
1 vote220 views6 answers
React-native build debug apk
Javascript React
1 vote209 views2 answers
How to create react native app
Javascript React
0 vote205 views1 answer
React-native-cli remove
Javascript React
3 votes200 views1 answer
React router dynamic routes
Javascript React
0 vote279 views1 answer
How to get the data from clicking on notification on web in reactjs
Javascript React