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
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
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!