/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 vote388 views1 answer
Ab mob react native expo
Javascript React
32 votes366 views1 answer
How to use react router
Javascript React
6 votes345 views1 answer
React dictionary key value avec 2 variable
Javascript React
11 votes346 views3 answers
Shadow border react native
Javascript React
0 vote360 views2 answers
'Navbar' is not defined react/jsx-no-undef
Javascript React
0 vote348 views1 answer
How to disable button if errors object isnt empty in react hook form
Javascript React
0 vote345 views1 answer
What is react mounting
Javascript React
0 vote418 views1 answer
Onclick inline function react
Javascript React
0 vote354 views2 answers
Write data in props.histroy.push in react component
Javascript React
105 votes398 views3 answers
React bootstrap do you need to import
Javascript React