Console.log prints twice when called once. The first result always empty. Why?

See more:

Javascript

API

console

ReactJS

Hi folks,

I've been banging my head on this issue for a week now. The more time I spend on it the more stuck I feel.

The basics are as follows:

Edit: Where I have mentioned Main.JS, MapContainer.JS, and StationsAPI, there are all links to code in Pastebin!

I'm using React, Webpack 4, Google Maps API and another third party API.
I'm fetching a JSON from an API in StationsAPI file. That file is then imported into Main.JS in which I'm getting all the data (array of objects) from StationsAPI and setting it as a state for the component which then I'm passing to the MapContainer component as props. Can't be as simple as this, right? Apparently not...

If I console log the data, where I'm supposed to receive a single line with an array of objects I get two lines, the first an empty array, the second the actual data.

I simply need to feed the data into setMarkers() in MapContainer.JS and render the markers, which by the way has been tested and works with dummy hardcoded data.

What I have tried:

I had another project before that had the same structure. An external API that does the fetch. Setting the data as a state in the parent component. And passing the data to the child component as props. Worked like a charm before so I used the same code again. The only difference being that I used create-react-app in the previous project and now I'm using React + Webpack 4.

Initially, I used a Promise in Main.JS to get all the data. Then simply passing it to the other component. That didn't work due to the issue described above. Since then I tried over dozens of different things and changed the code hundreds of times so I don't remember it all. I asked for help in Reddit and someone told me I should use async/await and I did which kinda helped but not really.

If I console log the stations variable within the async function I only get one result with the data which I set as the state of the Main component.

However when I console log this.state.stations afterward the issue is still present.

I'm in the dark here guys! No idea what might cause this and I've tried everything I could muster. I will really appreciate any assistance!