React - Leaflet MarkerCluster with Popup and Tabs

Question

I am having an issue using the MarkerCluster leaflet component with popup and React-Tabs. The issue is when I try to reset selected tab inside the popup, it's causing infinite loop This seems to be only when MarkerCluster group is used, otherwise it's working fine for a single marker

My code is as below

custom marker component

    const ExtendedMarker = props => {
      const initMarker = ref => {
        if (ref && props.isOpenMarker) {
          ref.leafletElement.openPopup();
        }
      };

      return <Marker ref={initMarker} {...props} />;
    };

    class CustomMarker extends React.Component {

      render() {
       const { icon, stop, isDisabledBtn, isOpenMarker, ...props } = this.props

       return (
        <ExtendedMarker
          icon={icon}
          position={[stop.latitude, stop.longitude]}
          isOpenMarker={isOpenMarker}
        >
          <Popup minWidth={260} closeButton={true} onOpen={() => this.setState({ tabIndex: 0 })}>
            <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
              <TabList>
.
.
.
.

index.js

            <MarkerClusterGroup showCoverageOnHover={false} maxClusterRadius={50}>
              {currentStops.map(stop => (
                <CustomMarker
                  key={v4()}
                  icon={getCategoryIconMarker(stop.category)}
                  stop={stop}
                  {...this.props}
                />
              ))}
            </MarkerClusterGroup>

So this code works fine when MarkerClusterGroup is removed otherwise it's causing an Error: Maximum update depth exceeded

Any help would be appreciated.

Thank You

score 0 · Answer 1 · answered Apr 17 '20 at 17:37

I think that is an error pattern I encountered when trying to use a function in the following way:

{getCategoryIconMarker(stop.category)}

If you instead use an arrow function, that may improve the situation. At least in my case the error disappeared. So, just replace the function above with:

{() => getCategoryIconMarker(stop.category)}

Hope someone will find it useful.

React - Leaflet MarkerCluster with Popup and Tabs

1 Answers1