/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 vote433 views1 answer
React native controlling device brightness
Javascript React
0 vote379 views2 answers
Read data in props.histroy.push in react component
Javascript React
5 votes392 views1 answer
Laravel react
Javascript React
6 votes360 views2 answers
UseHistory react-router-dom
Javascript React
0 vote454 views1 answer
Missing script: "start" react
Javascript React
4 votes409 views2 answers
Hide status bar react native
Javascript React
32 votes389 views1 answer
React router command
Javascript React
6 votes390 views2 answers
TextInput disable react native
Javascript React
0 vote419 views1 answer
My react router Dom learnings
Javascript React
112 votes435 views5 answers
Command to create react app
Javascript React