/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

11 votes207 views2 answers
React must be in scope when using jsx
Javascript React
0 vote213 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
0 vote189 views1 answer
How to disable reactive form submit button in Angular
Javascript React
0 vote259 views1 answer
Toggle function react js
Javascript React
3 votes195 views1 answer
React native nox emulator
Javascript React
0 vote184 views1 answer
React fetch data in for loop
Javascript React
4 votes194 views1 answer
How to send axios delete to the backend reactjs
Javascript React
0 vote185 views1 answer
Why my favicon icon is not removing in react
Javascript React
0 vote279 views2 answers
React particles react
Javascript React
0 vote261 views1 answer
React native sovrapporre immagini
Javascript React