react-svg-map

react-svg-map copied to clipboard

Having the component rerender when selectedLocationIds get updated is crucial to my use case as the selected states are stored on the backend.

I pulled down the project and added the below to checkbox-svg-map.jsx. Note that I installed lodash to compare the id arrays. For some reason github is giving me a hard time pushing up my branch :/

  componentDidUpdate({ selectedLocationIds: prevSelectedLocationIds }) {
    if (!_.isEqual(prevSelectedLocationIds, this.props.selectedLocationIds)) {
      const svgNode = ReactDOM.findDOMNode(this);
      const selectedLocations = this.props.selectedLocationIds.map(
        (locationId) => svgNode.getElementById(locationId)
      );
      this.setState({ selectedLocations });
    }
  }

This component was built to handle internally the state of the selected locations (kinda like an uncontrolled component). I think making selectedLocationIds update the internal state would break the "single source of truth" principle. It was created to fit the needs of my project, so it's probably a mistake of the initial design 🙇‍♂️

A better solution might be to follow the same API as react-checkbox-group:

• value to pass the selected ids to the checkbox component
• onChange to update value in the parent component

Unfortunately I think this issue can only be fixed in the next major version (v3.0.0) because there will be breaking changes. I don't know when I have time to implement it, so if you need a quick solution, I would recommend to create your own checkbox component around SVGMap. If you want to contribute, feel free to open a PR on the v3.0.0 branch!

I am also looking into using such a feature using RadioSVGMap but I can't get it to re-render and update the locationId. @insivika were you able to accomplish this task?

@arslanakhtar61 Since RadioSVGMap handles internally the state of the selected location (like CheckboxSVGMap), updating selectedLocationId won't re-render the component (as written in the documentation).

The next major version (v3.0.0) may include this feature. Until then, I would recommend to implement your own radio component around SVGMap.