/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 vote383 views1 answer
Fullcalendar edit event modal react
Javascript React
17 votes415 views3 answers
React router url params
Javascript React
1 vote432 views1 answer
How to use cookies in react js
Javascript React
63 votes375 views3 answers
Concat two arrays in react
Javascript React
0 vote390 views1 answer
React native map repeate
Javascript React
2 votes365 views3 answers
React native component at bottom center
Javascript React
1 vote362 views2 answers
React select disable option
Javascript React
3 votes368 views1 answer
Render image url in react native
Javascript React
0 vote390 views1 answer
React toastify does not have design
Javascript React
0 vote389 views1 answer
How to set max length of input in react js
Javascript React