/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

3 votes166 views2 answers
Use font awsome in react
Javascript React
0 vote171 views1 answer
Npm react-native-async-storage
Javascript React
17 votes154 views4 answers
Appdata roaming npm react-native.ps1 cannot be loaded
Javascript React
5 votes153 views1 answer
Laravel using react
Javascript React
0 vote148 views1 answer
React-particles-js not working
Javascript React
1 vote173 views1 answer
Adding list items in react
Javascript React
0 vote156 views1 answer
React load script after render
Javascript React
1 vote149 views1 answer
React native textinput no keyboard
Javascript React
3 votes195 views1 answer
React hooks send data from child to parent
Javascript React
0 vote155 views1 answer
Fetchutils in react admin
Javascript React