Click here to Skip to main content
15,901,205 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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!
Updated 12-Nov-22 0:42am
Patrice T 30-Oct-18 19:17pm    
And you have some code that show the problem ?
Xzahn 30-Oct-18 21:14pm    
Hi Patrice, StationsAPI, Main.JS, and MapContainer.JS are all links to code in Pastebin.
F-ES Sitecore 31-Oct-18 6:09am    
If you're getting two console logs then my guess is that your logging function is being called twice for some reason, maybe you've registered to the same event more than once. Without seeing the code it is impossible to say.
Xzahn 31-Oct-18 14:23pm    
Why are you not seeing the code? Where I have mentioned StationsAPI, Main.JS, and MapContainer.JS, these are all links to code in Pastebin. Come on...
Richard MacCutchan 31-Oct-18 16:16pm    
It is not our job to go and find your code and figure out what is wrong. It is your job to show those parts of the code that cause the problem and provide some details about what is going on.

1 solution

How did you solved the problem? Than you
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900