# Refreshing size with React

**URL:** <https://forum.kirupa.com/t/refreshing-size-with-react/640406>\
**Category:** Uncategorized\
**Created:** [September 4, 2019, 6:34pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406 "2019-09-04T18:34:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [September 4, 2019, 6:34pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/1 "2019-09-04T18:34:07Z")

</div>

I’ve found the issue on Stackoverflow in HTML/CSS/JS but struggling to get it to work in react. I have a Leaflet map that is not properly rendering because it is perceiving the display as “none” when the toggle is not clicked, but doesn’t reassess the size of the map/resize when clicked. Here are the stackoverflow posts: [https://stackoverflow.com/questions/42400662/loading-map-in-leaflet-is-very-slow](https://stackoverflow.com/questions/42400662/loading-map-in-leaflet-is-very-slow)  
[https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map](https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map)

**Here is what I have been attempting unsuccessfully in React:**  
componentDidUpdate() {  
const leafletMap = this.leafletMap.leafletElement;  
leafletMap.invalidateSize()  
}

```
<div ref={this.mapRef} style={{display:"none"}}>
      <div style={{height: "600px", width: "600px"}}>
              <Map
                  ref={m => { this.leafletMap = m; }}
                  center={mapCenter}
                  zoom={zoomLevel}
                  style={{height:"100vh"}}
              >
                <TileLayer
                    attribution={stamenTonerAttr}
                    url={stamenTonerTiles}
                  />
                <Marker position={coordinates} onClick={this.handleClick}></Marker>
             </Map>
      </div>
</div>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 5, 2019, 6:45am UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/2 "2019-09-05T06:45:29Z")

</div>

This is an interesting problem. Do you have a fuller example I can take a look at? If not, screenshots of the _before_ and _desired outcome_?

Thanks,  
Kirupa 🐵

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [September 5, 2019, 4:43pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/3 "2019-09-05T16:43:04Z")

</div>

Current rendering (not a load time issue):

 ![01%20AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/077c8e2836707f62c04cf2414a1f6c20ab7b99b5.png)  
Desired rendering (achieved when resizing the browser window):  
 ![09%20AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d5157d233622cdacab1a999a67f5b04c8e75299e.png)

This is the only additional relevant code beyond the above:  
toggleBox(e) {  
var x = this.mapRef.current;  
x.style.display = (e) ? “block” : “none”;  
};

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 5, 2019, 5:55pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/4 "2019-09-05T17:55:30Z")

</div>

Do you know for sure if this code is what causes the resize and redrawing?

```
const leafletMap = this.leafletMap.leafletElement;
leafletMap.invalidateSize()

```

With the React page open, I would run this code in the browser Console and see if it causes a redraw. If it does, then we can figure out if there is a different place in the React code this needs to be called from. If it doesn’t work via the Console, then there is another API that we should look at.

Cheers,  
Kirupa 🙂

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [September 5, 2019, 6:44pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/5 "2019-09-05T18:44:14Z")

</div>

Is this what you mean by running it in the console? I don’t think the same call works from the browser console?

 ![14%20AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/a3b7ee833147253160aa6066caf5fb2e0e416037.jpeg)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 5, 2019, 11:50pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/6 "2019-09-05T23:50:25Z")

</div>

Yes. I would try declaring the variable with another name to avoid the naming collision. You could also try `this.leafletMap.leafletElement.invalidateSize()` and see what happens 🙂

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [September 6, 2019, 3:55pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/7 "2019-09-06T15:55:09Z")

</div>

> [@kirupa](#):
>
> const leafletMap = this.leafletMap.leafletElement; leafletMap.invalidateSize()

Both result in this error: Uncaught TypeError: Cannot read property ‘leafletElement’ of undefined

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 6, 2019, 4:30pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/8 "2019-09-06T16:30:51Z")

</div>

This means that the map element isn’t being detected by your current code. I would double check your logic for accessing `leafletMap` and see if the reference is ever being set. A test you can do on the console might be to bypass React temporarily and just use `document.querySelector(" selector path to element ").leafletElement.invalidateSize()` or something similar.

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [September 6, 2019, 11:17pm UTC](https://forum.kirupa.com/t/refreshing-size-with-react/640406/9 "2019-09-06T23:17:32Z")

</div>

Yea I think I am doing something incorrectly… though I got a work around with this.forceUpdate(); in the toggleBox function