map.js

import React from 'react';

export var Map = React.createClass({
  propTypes: {
    responseBody: React.PropTypes.object
  },
  render() {
    let noResponse = !this.props.responseStatusCode;
    return  (<div className='map-container' id='map'></div>);
  },
  componentDidMount() {
    var geocodePoint = this.props.responseBody.features[0].center;
    mapboxgl.accessToken = 'pk.eyJ1IjoibmJiMTI4MDUiLCJhIjoiMUlFVjZWVSJ9.jeNyiaRq8MCHlXSlGQZIHA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: geocodePoint,
        zoom: 2
    })

    map.on('load', function () {
        map.addSource("geocoded-point", {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": geocodePoint
                    },
                    "properties": {
                        "icon": "circle"
                    }
                }
              ]
            }
        });

        map.addLayer({
            "id": "geocoded-point",
            "type": "circle",
            "source": "geocoded-point",
            "paint": {
              "circle-radius": 7,
              "circle-color": "#2C323C"
            }
        });
    });

    this.map = map;
  },

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