How to reference React Leaflet GeoJSON component layer name?

Question

So, I'm porting a Vanilla JS Leaflet application to React-Leaflet and I'm struggling with how to get the individual layer names of the layers created with React components. In the Vanilla JS example, I would have set the layer name as a variable myself, thus easily having access to it. With React Leaflet, it's unclear how to reference the layer that React Leaflet creates with the <GeoJSON /> component.

Currently, I've successfully ported the pointToLayers and onEachFeature functions pretty well, but my resetStyle function has to explicitly reference the layer name (or so I assume), and I don't really know how to figure that out.

import { MapContainer, TileLayer, GeoJSON, CircleMarker } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import 'leaflet-defaulticon-compatibility';
import { geoJSON, latLng } from 'leaflet';


const Map = ({points}) => {

//Marker Base styles
const markerOptions = {radius: 2, weight: 1, opacity: 1, fillOpacity: 0.8, }

//Marker styles based on types
const markerStyles = function(feature) {
  switch (feature.properties.art_type) {
      case 'Sticker': return {color: "#800026"};
      case 'Mural':   return {color: "#BD0026"};
      case 'Marker':   return {color: "#E31A1C"};
      case 'Characters':   return {color: "#FC4E2A"};
      case 'Letters':   return {color: "#FD8D3C"};
      case 'Tippex':   return {color: "#FEB24C"};
      }
}
// Events  events
function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
      layer.bringToFront();
  }
}

function resetHighlight (e){
  L.GeoJSON.resetStyle(e.target);
}

function zoomToFeature () {
  console.log(feature)
}

function onEachFeature(feature, layer){
  layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: zoomToFeature
  });
}

function pointToLayer(feature, latLng){
  return L.circleMarker(latLng, markerOptions)
}


  return (
    <MapContainer center={[50.1109, 8.6821]} zoom={13} scrollWheelZoom={false} style={{height: "100vh", width: "100%"}} renderer={L.canvas()}>
      <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
     
    <GeoJSON data={points} pointToLayer={pointToLayer} pathOptions={markerStyles} onEachFeature={onEachFeature} />

    </MapContainer>
  )
}

export default Map

Currently, anything I try in the resetHighlight feature returns undefined .

Answer 1

So, I got the answer from another SO question, but for me this worked geoJsonRef.current.setStyle(markerOptions); . I chose to use setStyle instead of reset because it was rewriting the styles to the defaults, rather than to my custom styles.

in a snippet:

const onMouseOut = (e) => {
  var layer = e.target;
  geoJsonRef.current.setStyle(markerOptions);

}