/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

59 votes267 views3 answers
Npm react router dom
Javascript React
3 votes307 views1 answer
React router Link does work
Javascript React
13 votes267 views10 answers
React navigation
Javascript React
7 votes313 views4 answers
Get parameter from url reactjs
Javascript React
0 vote347 views1 answer
State creation in class components reactjs interview questions
Javascript React
1 vote311 views1 answer
Add value to state array react native dispatch
Javascript React
0 vote309 views1 answer
React native paper modal background
Javascript React
0 vote345 views1 answer
How to accept only. proper email from an input field react with functional component
Javascript React
0 vote294 views2 answers
React tweet embed
Javascript React
0 vote370 views1 answer
No unuseds varsnreactjs
Javascript React