Following this guide: Feature Filters
When moving to another route (react) or effectively "cleaning up", I get thrown the following error in console.
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
If I remove the line of code `view.ui.add(filterExpand, "top-left");` then I have no issues. I am not sure what I am doing wrong, because the guide above has no explicit cleanup.
My code:
const Map = (props: any) => {
const classes = useStyles();
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
const filterStuff = (stuff: any, view: any) => {
const data = stuff.getAttribute("data-stuff");
// const test =
view.filter = new FeatureFilter({
where: `stuff='${data}'`
})
props.handleStuff(data);
}
const renderer = ...
const geoJSONLayer = new GeoJSONLayer({
url: ...,
renderer: renderer,
outFields: ["*"]
});
const map = new ArcGISMap({
basemap: "topo",
ground: "world-elevation",
layers: [geoJSONLayer]
});
const view: any = new SceneView({
container: mapDiv.current!,
map: map,
camera: {
position: {
...
},
tilt: 0
}
});
const filterElement = document.getElementById("stuff-filter");
view.whenLayerView(geoJSONLayer).then(function(layerView: any) {
// set up UI items
if (filterElement) {
filterElement.addEventListener("click", function(event) {
filterStuff(event.target, layerView);
});
filterElement.style.visibility = "visible";
const filterExpand = new Expand({
view: view,
content: filterElement,
expandIconClass: "esri-icon-filter",
group: "top-left"
});
//clear the filters when user closes the expand widget
filterExpand.watch("expanded", function () {
if (!filterExpand.expanded) {
layerView.filter = null;
props.handleStuff(null);
}
});
view.ui.add(filterExpand, "top-left");
}
});
}
}, []);
return (
<>
<div id="stuff-filter" className={classes.filter}>
{items.map((item, index) => (
<div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
))}
</div>
<div className={classes.mapImage} ref={mapDiv}></div>
</>
);
}
