/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 vote131 views1 answer
React-native-charts-wrapper:compileDebugJavaWithJavac FAILED
Javascript React
0 vote134 views1 answer
Publish reactjs package to gitlab repository
Javascript React
0 vote136 views2 answers
Barcode scanner react js
Javascript React
0 vote147 views1 answer
How to use rgba in react native
Javascript React
1 vote141 views1 answer
Textfield label language react
Javascript React
0 vote148 views1 answer
Mat slider in a reactve form
Javascript React
32 votes133 views5 answers
React disable eslint errors
Javascript React
3 votes129 views2 answers
Error duplicate resources react native
Javascript React
0 vote136 views1 answer
React tutorial componentDidMount() componentWillUnmount()
Javascript React
1 vote117 views3 answers
[PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React