/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 vote128 views1 answer
React native whatsapp integration
Javascript React
10 votes126 views2 answers
React-native text overflow ellipsis
Javascript React
23 votes148 views5 answers
USE ICONS IN REACT
Javascript React
0 vote132 views1 answer
React proxy to flask server
Javascript React
0 vote130 views1 answer
Change value in array react
Javascript React
-1 vote117 views1 answer
React slick npm
Javascript React
0 vote134 views1 answer
Font family react
Javascript React
0 vote149 views2 answers
Why navlink in react router always active
Javascript React
0 vote128 views1 answer
React passport session
Javascript React
0 vote130 views1 answer
Empty div react
Javascript React