/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

31 votes150 views3 answers
React mui icons
Javascript React
0 vote142 views1 answer
RenderIndicator example react responsive carousel
Javascript React
0 vote139 views1 answer
React fetch data in for loop
Javascript React
1 vote146 views2 answers
How to prevent render in react
Javascript React
1 vote132 views5 answers
Push notification react native
Javascript React
3 votes147 views4 answers
Import in react
Javascript React
0 vote184 views1 answer
React js bootstrap select option required
Javascript React
0 vote177 views1 answer
Setstate after timeout react
Javascript React
18 votes138 views6 answers
How to import svg in react
Javascript React
3 votes173 views1 answer
React how to create range
Javascript React