Reload a script in componentDidMount()

Question

I am using simplemaps in a component in my react project. I have added these two scripts in index.html <script type="text/javascript" src="map/mapdata.js"></script> <script type="text/javascript" src="map/countrymap.js"></script>

These scripts load the map in one of my React components in the following div

<div id="map"></div>

For some reason this map only gets loaded when the div with id="map" is in DOM for the initial app mount. On switching routes (i.e. when this div with id="map" is not there in the DOM) and coming back to the same component(i.e. when this div with id="map" is again there in the DOM) I am unable to see this map unless I reload the whole app.

You do not want to do that. What map api are you using? Open streetmaps/Leaflet? Google maps? No way we can solve this with no more than you've given us... — Jared Smith
– Jared Smith, Commented Mar 26, 2019 at 13:28
I have added the link to simplemaps in the question. I have edited the question as well it is not a duplicate. — Anand Tangri
– Anand Tangri, Commented Mar 26, 2019 at 17:49
This is a pretty obscure library, so you may get better results filing a bug against the library. However I can tell you from years of working with the google maps and leaflet APIs that maps really don't like being unrendered (e.g. when a react route changes). Triggering a resize event on window fixes it for those two, it may or may not help you. — Jared Smith
– Jared Smith, Commented Mar 26, 2019 at 17:57

Erim Varış · Accepted Answer · 2019-03-26 13:23:20Z

0

in js code

<script>

//code when switched
if(switched){ 
require('./map/mapdata.js'); 
} else {
require('./map/another.js'); }
</script>

usage like this will work

answered Mar 26, 2019 at 13:23

Erim Varış

941 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Smith Over a year ago

This does not answer the question.

Erim Varış Over a year ago

You can answer aswell then.

Jared Smith Over a year ago

I could but I thought it more fair to give you a chance to revise yours first. It always irritated me as a new SO user when higher rep users would swoop in and steal my thunder.

Dustin Gogoll · Accepted Answer · 2019-03-26 13:24:36Z

0

Well, you could create an script element and append it to your body on componentDidMount. If you want to make sure that it is only loaded once you could also add an ID and check if that ID exists.

answered Mar 26, 2019 at 13:24

Dustin Gogoll

2312 silver badges9 bronze badges

6 Comments

Jared Smith Over a year ago

This does not answer the question.

Dustin Gogoll Over a year ago

The questioen was how to load a script in the componentDidMount lifecycle method, and that is how you do it.

Jared Smith Over a year ago

Have you ever tried appending a script tag that has the same url as one that's already on the page? OP wants to reload the script every time the route is triggered. Besides, if it's just what you think it is then it's a duplicate and should be closed, not answered.

Dustin Gogoll Over a year ago

Yes I did and I actually did use this technique, I am not a fan of it, since it is against any design patterns, nevertheless, it works. Thats why I added that he should keep track of if the script tag already exists by the way. And maybe it is a duplicate. I am sorry that I am new on Stackoverflow and don't spot duplicates instantaneously. You are correct, I should have looked it up. Still, you could sound less like a dick.

Jared Smith Over a year ago

Fair enough. Apologies.

|

Collectives™ on Stack Overflow

Reload a script in componentDidMount()

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related