/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

17 votes344 views3 answers
Reducer react
Javascript React
0 vote335 views2 answers
React date picker disable past dates
Javascript React
0 vote337 views1 answer
Add event listener react hooks
Javascript React
2 votes333 views1 answer
Vertical align center react native view
Javascript React
0 vote340 views1 answer
Return multiple native element react native
Javascript React
0 vote380 views2 answers
Why navlink in react router always active
Javascript React
1 vote347 views1 answer
New line in p tag react
Javascript React
2 votes337 views2 answers
Add 2 class names react
Javascript React
5 votes360 views3 answers
How to scroll to an element javascript react
Javascript React
0 vote340 views1 answer
React get current date minus 7 days
Javascript React