/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

2 votes221 views1 answer
Vertical align center react native view
Javascript React
69 votes230 views6 answers
React icon
Javascript React
0 vote260 views1 answer
@tippyjs/react
Javascript React
-1 vote208 views8 answers
React native
Javascript React
1 vote216 views1 answer
Slider on release call api react material ui
Javascript React
0 vote240 views1 answer
React-select-search useSelect hook
Javascript React
2 votes225 views2 answers
Prevent refresh react
Javascript React
2 votes260 views2 answers
How to add query parameter to url reactjs
Javascript React
1 vote277 views1 answer
How to resize react icons
Javascript React
0 vote226 views1 answer
React interactions
Javascript React