mapbox rendering with react and node client-side for medium

mapbox-render-node-react.jsx

import React from 'react'
let mapboxgl;

if (__CLIENT__) {
  mapboxgl = require('mapbox-gl')
  mapboxgl.accessToken = 'yourkeyhere';
}

class Map extends React.Component {
    constructor() {
        super()
        this.state = {
            width: 300,
            height: 300 
        }

        this.mapContainer = null
        this.lat = -70.6244855
        this.long = -33.4240608
    }

    componentDidMount() {
        const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [this.lat, this.long],
            zoom: 10
        });

        var marker = new mapboxgl.Marker({
            draggable: true
        })
        .setLngLat([this.lat, this.long])
        .addTo(map);

        marker.on('dragend', function () {
            var lngLat = marker.getLngLat()
        })
    }
    
    render() {
        const divStyle = {
            width: this.state.width,
            height: this.state.height
        }

        return (
            <div>
                <div ref={el => this.mapContainer = el} style={divStyle} />
            </div>
        )
    }
}

export default Map