score:2

Accepted answer

Original Solution:

Do you need to reset your zoom level after you exit the edit mode? Your logic is very tightly coupled between mapCenterPoint and the if(zoomLevel... portion of plotMarker. I'm wondering if you may have a state that is causing this to always evaluate true after editing (and until manually zooming): props.plots && (props.selectedPlot || props.plotBeingEdited)


Thoughts on Refactoring:

to figure out a more elegant way

Option 1: HOCs

Higher Order Components (or HOCs) might be a great approach for this. You have an example of a HOC already in your code:

export default connect(mapStateToProps, actions)(PlotMarker);

HOCs are really just functions that return something useful to you in the React world. As such, they're a great form of code reuse. connect is a HOC that returns a function in this scenario, but HOCs are often used to return components. So you may have a HOC like plotMarker(zoomLevel, beingEdited) that performs the logic itself to determine which type of marker component to render.

Check out React's Higher Order Component Documentation for more.


Option 2: Single Return Statement

I've always been a fan of using a single return statement for the render method. I haven't dug in super deep to how React handles diffs, but I'm pretty sure from my experience that it responds better this way - so it might remove the need for you to twitch the zoom levels to reset it.

How I would perform all of PlotMarker's logic inside one return:

export class PlotMarker extends Component{
  render(){
    const {
      id,
      name,
      geoJSON,
      zoomLevel,
      selectedPlot,
      plotBeingEdited
    } = this.props;

    const markerPosition = position(geoJSON);

    let style = () =>{
      return {
        color: 'blue'
      };
    };
    if(selectedPlot === id){
      style = () =>{
        return {
          color: 'red'
        };
      };
    }

    return (
      <div>
        {
          zoomLevel > 14 && plotBeingEdited === id &&
          <PlotPolygon id={id} geoJSON={geoJSON}/> ||
          
          zoomLevel > 14 &&
          <GeoJSON
            id={id}
            data={geoJSON}
            style={style}
            onClick={() =>{
              this.props.selectPlot(id);
            }}
          /> ||
          
          <Marker
            id={id}
            className="marker"
            position={markerPosition}
            onClick={() => {
              this.props.selectPlot(id);
            }}>
            <Popup>
              <span>{name}</span>
            </Popup>
          </Marker>
        }
      </div>
    );
  }
}

Related Query

More Query from same tag