How to use the mapbox-gl/dist/mapbox-gl.js.accessToken function in mapbox-gl

init(context, parent) {
    mapboxgl.accessToken = "pk.eyJ1Ijoic2VyZ2V5ZiIsImEiOiJjaXlqeWo5YnYwMDBzMzJwZnlwZXJ2bnA2In0.e711ku9KzcFW_x5wmOZTag";
    this.context = context;
    this.parent = parent;
  },

'use strict'

let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
let toColor = require('to-color')
let isReachable = require('remote').require('is-reachable')
let argv = require('remote').require('./argv')
let convert = require('./convert')
let dataStyle = require('./base-styles.json')
let reduceExtent = require('./reduce-extent')
let getExtent = require('./get-extent')
let config = require('./config')

mapboxgl.accessToken = argv.accessToken || config.mapboxAccessToken
window.turf = require('turf')

const dataLayers = {
  point: dataStyle.layers.find((l) => l.id === 'point-data'),
  line: dataStyle.layers.find((l) => l.id === 'line-data'),
  polygon: dataStyle.layers.find((l) => l.id === 'polygon-data')
}

let map
let basemap
isReachable('mapbox.com', function (_, online) {
  if (!online) { argv.basemap = 'offline' }
  if (/^(plain|land|offline)$/.test(argv.basemap)) {
    basemap = dataStyle
  } else if (!argv.basemap) {
    basemap = dataStyle

center,
      pitch,
      zoom,
      minZoom,
      maxZoom,
      maxBounds,
      fitBounds,
      fitBoundsOptions,
      bearing,
      scrollZoom,
      attributionPosition,
      interactive,
      dragRotate,
    } = this.props;

    MapboxGl.accessToken = accessToken;

    const map = new MapboxGl.Map({
      preserveDrawingBuffer,
      hash,
      zoom: zoom[0],
      minZoom,
      maxZoom,
      maxBounds,
      bearing,
      container: this.container,
      center,
      pitch,
      style,
      scrollZoom,
      attributionControl: {
        position: attributionPosition,

componentDidMount() {
    const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic2RyYXNuZXIiLCJhIjoiY2pmZzBqZmptMjI1eTMzbWl1bGExMHppZyJ9.diPXryPOiyMuqcV4mpNOlg';
    new mapboxgl.Map({
      container: this.mapContainer.current,
      style: 'mapbox://styles/sdrasner/cjfg0watl6rkv2sllf6hepdd5',
    });
  }

componentDidMount() {
    MapboxGl.accessToken = this.props.accessToken

    const map = new MapboxGl.Map({
      container: this.container,
      style: convertInspectStyle(this.props.mapStyle, this.props.sources, this.props.highlightedLayer),
      hash: true,
    })

    const nav = new MapboxGl.NavigationControl();
    map.addControl(nav, 'top-right');

    map.on("style.load", () => {
      this.setState({ map });
    })

    map.on("data", e => {
      if(e.dataType !== 'tile') return

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

mapboxgl.accessToken = 'pk.eyJ1IjoidGFyYW5nYWRhdmUiLCJhIjoiY2lxbnlzOW50MDFmcGZwbmh4aTNsNTBvMCJ9.6aajD-dmKN8aJIT5UG0aQQ';
var map = new mapboxgl.Map({
  container: 'root',
  style: 'mapbox://styles/mapbox/streets-v11'
});


class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img alt="logo" src="{logo}">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          </header></div>