/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 vote144 views1 answer
Reset reactive state vue 3
Javascript React
1 vote132 views1 answer
REACt helmet og tags DONT WORK
Javascript React
1 vote143 views1 answer
React native image disable fade in onload
Javascript React
2 votes135 views2 answers
Unable to resolve module react-navigation
Javascript React
0 vote130 views1 answer
New Intl.NumberFormat en react
Javascript React
1 vote171 views1 answer
React multiple event handlers]
Javascript React
1 vote179 views2 answers
Shadow on view in react natice
Javascript React
0 vote165 views1 answer
React nativ export default
Javascript React
0 vote139 views1 answer
Get status bar height react native
Javascript React
2 votes85 views1 answer
Function component react form
Javascript React