/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

3 votes221 views2 answers
Discord.js react to message
Javascript React
64 votes209 views6 answers
React js router
Javascript React
2 votes259 views1 answer
Cursor to pointer in react
Javascript React
0 vote201 views1 answer
React call bind apply
Javascript React
0 vote205 views1 answer
Render(<App />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument();
Javascript React
5 votes198 views4 answers
Google map in react js
Javascript React
0 vote214 views1 answer
How to add alternate image in img tag in react
Javascript React
0 vote212 views1 answer
Close all function of react in vscode mac
Javascript React
0 vote214 views2 answers
Quokka create-react-app sample
Javascript React
0 vote192 views1 answer
React particles js
Javascript React