React-Leaflet: Uncaught TypeError: pointToLayer is not a function

Question

I'm trying to use the pointToLayer parameter in the GeoJSON component. I defined the the function pointToLayer outside of the component ( different file) and I get getting that error.

Map.js:

import {pointToLayer} from '../helpers/helper-country-point';
<GeoJSON>
      key={_.uniqueId()}
      data={this.props.activeCountry.geojson}
      pointToLayer={pointToLayer(this)}
 ></GeoJSON>

The file ../helpers/helper-country-point is :

import L from 'leaflet';
export function pointToLayer(feature, latlng) {
  return L.circleMarker(latlng, {
    color: 'white',
    fillColor: 'white',
    fillOpacity: .8,
    radius: 3,
    stroke: false
  }).bindPopup("MESSAGE") // Change marker to circle
}

When I define pointToLayer inside Map.js and use:

<GeoJSON
 key={_.uniqueId()}
 data= {this.props.countrySelected.geojson}
 pointToLayer={this.pointToLayer.bind(this)}
 ></GeoJSON>

It works. Any idea of why I keep getting this error ?

Answer 1

In the first one, you are invoking the function and using this as the argument.

In the second one, you are not invoking the function. You are simply passing the function as props. You can try removing the (this) part in your first example, so you only pass the function without invoking it.

Then, since the error is pointToLayer is not a function, and it is resolved when you declare the function in map.js , I suspect that you might have written the wrong path to the helper.js file.