/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

1 vote157 views2 answers
React native open link in browser
Javascript React
0 vote137 views1 answer
Open sans font react js
Javascript React
40 votes134 views4 answers
What does useref do react
Javascript React
0 vote123 views1 answer
React features
Javascript React
0 vote155 views1 answer
React-native-calendars how to mark selected day
Javascript React
2 votes117 views4 answers
Multiple export in react
Javascript React
0 vote126 views1 answer
React buffer to image
Javascript React
1 vote137 views2 answers
Use state reactjs
Javascript React
0 vote128 views2 answers
Call a method of component from outside react
Javascript React
0 vote132 views1 answer
React passport session
Javascript React