/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 vote241 views1 answer
React toastify does not have design
Javascript React
0 vote255 views1 answer
React recursive component
Javascript React
9 votes206 views1 answer
Redux add to array
Javascript React
2 votes236 views2 answers
React get url querystring
Javascript React
0 vote174 views1 answer
Left side menu react js
Javascript React
0 vote244 views1 answer
The email address is badly formatted react
Javascript React
1 vote207 views2 answers
Upload image react
Javascript React
0 vote217 views2 answers
Batch react-redux
Javascript React
0 vote243 views2 answers
React-native local image not showing ios
Javascript React
0 vote232 views2 answers
Date format in react js
Javascript React