/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 vote261 views1 answer
How to creacte react component
Javascript React
25 votes237 views3 answers
Setting a background Image With React Inline Styles
Javascript React
0 vote262 views1 answer
How to redirect a form to another page when we submitted a form in react js
Javascript React
1 vote259 views1 answer
React conditional array item
Javascript React
0 vote238 views1 answer
Get all database react native
Javascript React
0 vote276 views1 answer
Declaring variable react hooks
Javascript React
18 votes271 views3 answers
Add material ui to react
Javascript React
0 vote244 views1 answer
Which algorithm React is used to compare dom?
Javascript React
1 vote256 views1 answer
React-bootstrap navbar nav link refreshes page
Javascript React
-2 votes226 views3 answers
React and express
Javascript React