/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 vote215 views1 answer
Which react-bootstrap component you will use for width: 100% across all viewport and device sizes
Javascript React
0 vote252 views1 answer
How to filter data from mongodb date in reactjs
Javascript React
0 vote236 views1 answer
React.js file extension
Javascript React
0 vote205 views1 answer
React Mixed symbols
Javascript React
0 vote217 views2 answers
Hot reload problem react 17
Javascript React
0 vote270 views1 answer
How to creacte react component
Javascript React
0 vote284 views1 answer
Reactjs facebook login popup trigger on load page
Javascript React
3 votes212 views2 answers
React usestate functional update
Javascript React
0 vote216 views1 answer
How to add react.memo in export list
Javascript React
-1 vote238 views1 answer
Date time react component
Javascript React