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, Mar 26 '19 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, Mar 26 '19 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, Mar 26 '19 at 17:57

score 0 · Answer 1 · answered Mar 26 '19 at 13:23

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 '19 at 13:23

Erim Varış

84
9

This does not answer the question. – Jared Smith Mar 26 '19 at 13:29
You can answer aswell then. – Erim Varış Mar 29 '19 at 09:54
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. – Jared Smith Mar 29 '19 at 13:59

score 0 · Answer 2 · answered Mar 26 '19 at 13:24

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 '19 at 13:24

Dustin Gogoll

216
2
7

This does not answer the question. – Jared Smith Mar 26 '19 at 13:28
The questioen was how to load a script in the componentDidMount lifecycle method, and that is how you do it. – Dustin Gogoll Mar 26 '19 at 13:33
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](https://stackoverflow.com/questions/49851104/how-to-load-script-in-react-component) and should be closed, not answered. – Jared Smith Mar 26 '19 at 13:35
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. – Dustin Gogoll Mar 26 '19 at 13:48
Fair enough. Apologies. – Jared Smith Mar 26 '19 at 14:18
I have made an edit to the question. It is not a duplicate – Anand Tangri Mar 26 '19 at 17:47

Reload a script in componentDidMount()

2 Answers2