Refreshing size with React

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:

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

<div ref={this.mapRef} style={{display:"none"}}>
      <div style={{height: "600px", width: "600px"}}>
                  ref={m => { this.leafletMap = m; }}
                <Marker position={coordinates} onClick={this.handleClick}></Marker>

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?

Kirupa :monkey_face:

Current rendering (not a load time issue):

Desired rendering (achieved when resizing the browser window):

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

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

const leafletMap = this.leafletMap.leafletElement;

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.

Kirupa :slight_smile:

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

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 :slight_smile:

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

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.

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