/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 vote215 views1 answer
Image and video lightbox react
Javascript React
1 vote232 views5 answers
React state
Javascript React
0 vote210 views1 answer
React native pure component vs component
Javascript React
0 vote183 views1 answer
Failed to construct image react-native
Javascript React
0 vote197 views2 answers
Read and save excel with react
Javascript React
3 votes221 views3 answers
Multiple styles in react native
Javascript React
10 votes190 views1 answer
Device height react native
Javascript React
2 votes208 views1 answer
React strict mode
Javascript React
0 vote183 views1 answer
A react component can only return]
Javascript React
0 vote272 views1 answer
Find in array and return true or false react js
Javascript React