/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

1 vote192 views1 answer
How to connect socket in react js
Javascript React
1 vote195 views1 answer
React native could not get batchedbridge
Javascript React
0 vote203 views1 answer
Stop React Ant Design Upload component from posting files automatically
Javascript React
0 vote220 views1 answer
Duplicate module name: React Native hasteimpl react native android
Javascript React
0 vote204 views1 answer
Detect the city on application launch via geolocation react native
Javascript React
24 votes210 views5 answers
How to change port in react js
Javascript React
0 vote204 views2 answers
Sending props via navigate() of react router v6
Javascript React
1 vote194 views1 answer
Yup only characters regex validation react
Javascript React
0 vote187 views1 answer
News api react native
Javascript React
0 vote200 views1 answer
React-data-table-component cell action
Javascript React