/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

63 votes211 views6 answers
React router install
Javascript React
29 votes191 views6 answers
React background image
Javascript React
0 vote201 views2 answers
React native bottom sheet example
Javascript React
0 vote221 views1 answer
Toggle class onscroll hook react
Javascript React
1 vote205 views5 answers
React date picker
Javascript React
3 votes370 views2 answers
Center an element react native
Javascript React
0 vote255 views1 answer
React native counter
Javascript React
0 vote199 views1 answer
Can't bookmark react router
Javascript React
0 vote224 views1 answer
React Calender Style
Javascript React
4 votes209 views1 answer
Read keyboard reactjs
Javascript React