Dynamic array of SvgProxy

[FTWinston]

I initially used an SvgProxy with a selector that changed to add/remove elements, i.e.

<SvgProxy
    selector={'#' + elementIDs.join(',#')}
    class="myClass"
/>

As indicated on #3, this doesn't remove the class from elements when they are removed from the selector. As was recommended on that issue, I switched to using one SvgProxy per element, like so:

elementIDs.map(id => <SvgProxy key={id} selector={'#' + id} class="myClass" />

But the same thing happens: if I remove an element's ID from elementIDs, myClass doesn't get removed.

Am I doing this wrong? I was able to work around the problem by including this proxy:
<SvgProxy selector="[id]" class="" />, but that seems like a bit of a hack.

[hugozap]

Hi, the way you solved it is correct. Currently, removing a proxy doesn't undo the changes to that element, so you must have a general rule that sets the value to the default one.

[FTWinston]

OK, thanks. Works for me!

[c-malecki]

Hello. I know this issue is closed, but could I get a more thorough of an explanation or a code example of how @FTWinston solved this issue?

I am working on an OSS project that uses this library to generate a SVG heat map. The SvgProxys are mapped from a dynamic array that is filtered based on a slider. Adjusting the slider, which then filters the array, does not seem to change or update the SvgProxy props.

render() {
    const { mapData } = this.props;
    return (
      <div className="DistrictMaps_Container">
        <SvgLoader path={DistrictsMap}>
          {mapData.map((data) => (
            <React.Fragment key={`districtWrapper${data.district}`}>
              <SvgProxy
                key={`#${data.district}`}
                selector={`#${data.district}`}
                fill={this.genColor(
                  this.getRate(data.shortagesReported, data.resourceReports)
                )}
                onClick={() => this.handleUpdateMapInfoDisplay(data)}
              />
            </React.Fragment>
          ))}
        </SvgLoader>
      </div>
    );

The fill prop computation is a little messy at the moment, but it basically should return a different #color based on the props passed down.

Thank you!

[hugozap]

Hi @c-malecki , not sure if I understand your issue (you can add a new issue if you want to explain it).

This issue was related to a selector that changed and the assumption that the elements that were changed previously would be resetted (This library doesn't keep the original state of an element changed by a proxy).

The solution was to add an SvgProxy that targets all the elements and serves as a "reset".
(It should be added before the other SvgProxy elements, so it runs first).

In this particular issue the "reset" SvgProxy is
which means that all the elements with an "id" attribute will have their class attribute set to empty string. (Your reset selector could be different based on your structure).

Hope it helps but feel free to open a new issue if you have additional questions.

[FTWinston]

Hey @c-malecki, my solution was exactly as @hugozap explained, but here's the code example you asked for.