/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 vote288 views1 answer
How to define cardTitle background image in mdl in reactjs
Javascript React
0 vote287 views1 answer
Remove an item from a component in react
Javascript React
1 vote322 views2 answers
Reset form input react
Javascript React
1 vote320 views1 answer
Npx create react app Must use import to load ES Module error
Javascript React
-2 votes354 views1 answer
Keyboard close when typing react native
Javascript React
5 votes288 views2 answers
React onclick new tab
Javascript React
23 votes324 views6 answers
React native shadow
Javascript React
0 vote334 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React
0 vote351 views1 answer
How to remove elevation tab bar react native
Javascript React
112 votes354 views6 answers
Import bootstrap 4 in react
Javascript React