/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 vote409 views1 answer
Change value in array react
Javascript React
0 vote372 views1 answer
Set meterial icon color change onClick react
Javascript React
1 vote399 views2 answers
React chartjs 2
Javascript React
0 vote390 views1 answer
Open screen pdf on google drive react native expo
Javascript React
1 vote394 views5 answers
React state
Javascript React
0 vote370 views1 answer
Justifycontent react native flatlist
Javascript React
8 votes396 views3 answers
Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Javascript React
1 vote434 views1 answer
Statusbar.sethidden(true) in react native
Javascript React
1 vote428 views1 answer
React native textinput not show cursor
Javascript React
0 vote399 views1 answer
Mreact graph
Javascript React