/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

18 votes217 views6 answers
How to import svg in react
Javascript React
0 vote202 views1 answer
React native pdf creater html-to-pdf
Javascript React
0 vote252 views1 answer
Search for country name from api with react
Javascript React
0 vote232 views1 answer
Get status bar height react native
Javascript React
0 vote268 views1 answer
React Fractional rating
Javascript React
0 vote281 views1 answer
Add Multilanguage Support to React App
Javascript React
1 vote221 views1 answer
How to use array of object in react
Javascript React
1 vote238 views1 answer
React js component parameters
Javascript React
8 votes260 views4 answers
Get current url react router
Javascript React
0 vote237 views1 answer
Library to add navigation in react native
Javascript React