Regarding fetch api in react js

Question

I am building a project in react js in which I have used api.. After fetching data, first it return undefined and then it gives required data.. Why is this happening.. And what is the solution to prevent this..!! I am not using axios

Answer 1

Show your code first.

Answer 2

Since no code is provided, I hope this could be possible reason.
considering class based component, if you are using side effects in componentDidMount data will be undefined on initial render since the render method runs before componentDidMount. So to stop this behaviour, u need a loading state, initially set to true, and in the fetch api then promise set loading state to false,
And in render method try to show some loader if loading is true else render the component.

Answer 3

Use conditional on jsx to ensure only display ready fetched data.

eg.

function App () {
// fetch fetchedData from api here using lifecycle methods here
// :

return (
<div>
{ fetchedData ? <p>fetchedData</p>: null }
</div>
)
}