API ain’t appearing

So I have decided to start my whole project again and fetch API with a different method async await .

The fetching part was fine but then when I reloaded, there was error that API did not show up on the console. It flashed for 1 second and then disappeared. I kept pressing the button to call the API and the whole application refreshes where the API appear and disappear within seconds.

Solution

Because I am using onSubmit() on the <form> component to fetch the API, the app will automatically reload/refresh the browser to flush all state and to submit the data to a backend. This makes the API on the console appear and disappear because the the browser is being refreshed.

Add e.preventDefault() inside the function that you call the API from. In this case my method to call the API is within a Class Component

this is the method to call API that is inside my Class Component. Just add e.preventDefault(); inside the method just before the //api call and make sure to pass the argument e

A preventDefault is called on the event when submitting the form to prevent a browser reload/refresh.