I am working on a map with react-leaflet. I placed a button on the map that will ideally open a menu on the left side of the map. The way I want to open up the menu is by changing the width of the map from 100% to 80%. The menu button toggles a boolean, which ideally the map will rerender and resize when the button clicks.

this is the code in my App.js

export default function App() {
    const [isMarkerClick, setIsMarkerClick] = React.useState(false);
   const [isMenuOn, setIsMenuOn] = React.useState(false);

    function toggleMarker() {
        setIsMarkerClick(prevClick => !prevClick);
    }

    function toggleMenu() {
        setIsMenuOn(prevMenu => !prevMenu);
   }


    return (
        <div>
            <MainMap isMenuOn={isMenuOn} />
            <MarkerButton isMarkerClick={isMarkerClick} toggleMarker={toggleMarker} />
            <MenuButton toggleMenu={toggleMenu} />
        </div>
    )
}

this is where the Map Code lives

export default function MainMap(props) {
    const isMenuOn = props.isMenuOn;
    const isMarkerClick = props.isMarkerClick;
    const zoom = 15;
    const position = ['39.9526', '-75.1652'];
    const [marker, setMarker] = React.useState(["", ""])

    return (
        <div>
            <MapContainer
                center={position}
                zoom={zoom}
                zoomControl={false}
                style={{
                    height: "100vh",
                    width: isMenuOn ? "80vw" : "100vw"
                }}
            >

                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

                <Marker position={marker}></Marker>

                {isMarkerClick && <ClickTrack setMarker={setMarker} />}

            </MapContainer>
        </div>
    )
}

as of now, when I click the menu button, the isMenuOn state updates and which then feeds back into the MapContainer and should rerender with a new width but it doesn't. Any Ideas on how to get change the map size with a click of button using react?

example of the menu button

I thought that when clicking the menu button and changing the state of isMenuOn to "true", the mapcontainer would be listening and rerender with using the new width. Although it seems like setting the width through style ={{}}, might not allow for changes?

CodePudding user response：

React Leaflet will only set the width and height when the component mounts and does not update it with the state changes, in order to update the map's width you need to re-render the component fully and to do that set the component's key to something that will change with the isMenuOpen value

here is an example

        <MapContainer
            center={position}
            zoom={zoom}
            zoomControl={false}
            key={isMenuOn ? "open-state": "closed-state"}
            style={{
                height: "100vh",
                width: isMenuOn ? "80vw" : "100vw"
            }}
        >