/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 vote125 views1 answer
Comment creer des switch en react js
Javascript React
4 votes113 views1 answer
On window resize react
Javascript React
64 votes146 views7 answers
React router
Javascript React
5 votes112 views3 answers
Open in a new tab react
Javascript React
56 votes111 views6 answers
Useref react
Javascript React
0 vote110 views1 answer
React download file from express res.download
Javascript React
0 vote137 views1 answer
React native elements bottom sheet close on back button press
Javascript React
0 vote115 views1 answer
How to add css based on route react
Javascript React
1 vote74 views1 answer
React native close other app
Javascript React
13 votes102 views1 answer
React making post request
Javascript React