/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 vote503 views1 answer
Canvas js in react
Javascript React
0 vote300 views1 answer
Saving react code messing up in vsc
Javascript React
32 votes325 views1 answer
React router command
Javascript React
0 vote270 views1 answer
Build function component react
Javascript React
3 votes408 views3 answers
How to uninstall react native cli globally
Javascript React
4 votes344 views1 answer
React props.children proptype
Javascript React
0 vote337 views1 answer
React native unexpected token '<'
Javascript React
0 vote320 views1 answer
Location maps react native
Javascript React
4 votes383 views2 answers
React usememo vs usecallback
Javascript React
2 votes345 views1 answer
React allow only numbers in input
Javascript React