Add geoJSON to this.map mapbox-gl-js

Question

I have included both the extract from the source code as well as the full source code below.

I am trying to add geoJSON to my mapbox-gl-js Map class component in React, and when running the function as displayed below I receive an error cannot read property addSource of undefined . I believe it is because of my use of this.map , but I am not sure. Where am I going wrong here ?

EXTRACT

this.map.on('load', function() {

        this.map.addSource("points", {
          type: "geojson",
          "data": nightlife_data,
        })

        this.map.addLayer({
          "id": "points",
          "type": "symbol",
          "source": "points",
              "layout": {
                "icon-image": "{icon}-15",
                "text-field": "{title}",
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 0.6],
                "text-anchor": "top"
              }
        })

FULL SOURCE

mapboxgl.accessToken = accessToken;

class Map extends React.Component {
  constructor(props){
    super(props);
  }

  componentDidMount() {
    getLocation(
      (userLocation) => {
        this.map = new mapboxgl.Map({
          container: this.mapContainer,
          zoom: 11.5,
          center: userLocation,
          style: "mapbox://styles/mapbox/light-v9"
        })
          this.map.addControl(
            geocoder,
            "top-left"
          )

          this.map.addControl(
            locater,
            "top-right"
          )

          const nightlife_data = request({
            url: "https://api.foursquare.com/v2/venues/search",
            method: 'GET',
            qs: {
              client_id: foursquareID,
              client_secret: foursquareSecret,
              ll:  userLocation[0] + "," + userLocation[1],
              categoryId: "4d4b7105d754a06376d81259",
              v: '20170801',
              limit: 1
            }, function(err, res, body) {
                if(err) {
                  console.error(err);
                } else {
                  console.log(body);
                }
            }
          })

          this.map.on('load', function() {

            this.map.addSource("points", {
              type: "geojson",
              "data": nightlife_data,
            })

            this.map.addLayer({
              "id": "points",
              "type": "symbol",
              "source": "points",
                  "layout": {
                    "icon-image": "{icon}-15",
                    "text-field": "{title}",
                    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                  }
            })
      }
    )
      // automatically show the user location on map
      setTimeout(locater._onClickGeolocate.bind(locater), 5)
   })
  }

  componentWillUnmount() {
    this.map.remove();
  }

  render() {
      return <div className="map" ref={el => this.mapContainer = el} />;
  }
}

export default Map;

Answer 1

Since you use a function , the 2nd this is different from the first one and does not contain the map that you setted beforehand

this.map.on('load', function() {

    this.map.addSource("points", {
      type: "geojson",
      "data": nightlife_data,
    })

    ...
}

You could try an arrow function instead as it keeps the outer this ( lexical scoping ):

this.map.on('load', () => {

    this.map.addSource("points", {
      type: "geojson",
      "data": nightlife_data,
    })

    ...
}