react-leaflet , when a country is selected I want to highlight that country borders - leaflet

Question

I am trying to use geoJson layer and pass it the selectedCountry .
I get this error : "BordersGeoJSON.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'geoJSON')"
I have checked that selectedCountry is a valid geoJSON object. The console log looks like this:
{type: 'Feature', properties: {…}, geometry: {…}}
geometry
:
{type: 'Polygon', coordinates: Array(1)}
properties
:
{name: 'Ireland', iso_a2: 'IE', iso_a3: 'IRL', iso_n3: '372'}
type
:
"Feature"
[[Prototype]]
:
Object
My code is this:
import { useEffect } from 'react';
import { L } from 'leaflet';
const BordersGeoJSON = ({mapRef, selectedCountry}) => {
useEffect(() => {
if (mapRef && selectedCountry) {
console.log(selectedCountry)
const layer = L.geoJSON(selectedCountry, {
style: () => ({ color: "red" }),
});
layer.addTo(mapRef.leafletElement);
}
}, [mapRef, selectedCountry]);
return null;
};
export default BordersGeoJSON
I have tried to use selectedCountry geometry only but I get the same error
I have tried using directly the geoJSON file instead of selectedCountry but I get the same error
Here it is on sandbox : https://codesandbox.io/s/vigilant-galois-7y1xd3?file=/src/components/leaflet/BasicMap/PointsOfInterest.js

Answer 1

I got it working.
I have changed things to use GeoJson component and use the selectedCountry state. GeoJson needs a key to update every time selectedCountry changes .
here is the code :
import { useEffect, useState } from 'react';
import {GeoJSON } from 'react-leaflet';
const BordersGeoJSON = ({bounds, selectedCountry}) => {
const [geoJsonKey, addToGeoJsonKey] = useState(1);
useEffect(() => {
addToGeoJsonKey(geoJsonKey + 1)
}, [selectedCountry])
return (
<>
{ selectedCountry &&
<GeoJSON
key={geoJsonKey}
data={selectedCountry}
style={() => ({ color: 'blue' })}
/>
}
</>
);
};
export default BordersGeoJSON