El componente GeoJson tiene una función onEachFeature que llama a un controlador, en este caso es createPopup .
<GeoJSON data={covidGeoJSON} onEachFeature={createPopup}></GeoJSON>
Dentro del controlador createPopup , ¿cómo puedo acceder a los estados definidos dentro del componente CovidMap?
import React, { useState } from 'react' import { MapContainer, GeoJSON } from 'react-leaflet' import 'leaflet/dist/leaflet.css' CovidMap = ({ covidGeoJSON, styles }) => { const showCords = (e) => { console.log(e.latlng); } const createPopup = (state, layer) => { layer.on({ mouseover: showCords, }); layer.bindPopup(state.properties.NAME); } const [range, setRange] = useState([]); return ( <div> <MapContainer style={{ height: '90vh', width: '100vw' }} center={[39.162497380360634, -94.83672007881789]} zoom={5}> <GeoJSON data={covidGeoJSON} onEachFeature={createPopup}></GeoJSON> </MapContainer> </div> ) } export default CovidMapDebería poder hacer referencia al estado desde createPopup . Cree y use variables de estado dentro de CovidMap usando el useState :
const CovidMap = () => { ... const [properties, setProperties] = useState({}); // Defined BEFORE handler const [layer, setLayer] = useState({}); // Defined BEFORE handler const createPopup = () => { layer.on({ mouseover: showCords, }); layer.bindPopup(properties.NAME); } ... }