/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 vote248 views1 answer
Scrollbar automatically scroll down as new divs are added reactjs
Javascript React
2 votes174 views1 answer
React promises
Javascript React
0 vote183 views1 answer
React-native-charts-wrapper:compileDebugJavaWithJavac FAILED
Javascript React
-2 votes334 views1 answer
Redux template create react app
Javascript React
1 vote196 views1 answer
Share file in react native
Javascript React
0 vote176 views1 answer
React Rendering Movies
Javascript React
0 vote248 views1 answer
Toggle function react js
Javascript React
1 vote211 views2 answers
Expo create react native app
Javascript React
0 vote2.2K views1 answer
How get value of datePicker in react
Javascript React
5 votes184 views3 answers
Open in a new tab react
Javascript React