JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<div id='map'></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

var map = new mapboxgl.Map({
  container: 'map',
  style: 'https://maputnik.github.io/osm-liberty/style.json',
  center: [8.538961, 47.372476],
  zoom: 5,
  hash: true
});

function extend(fn, data) {
  return (e) => {
    e.data = data
    fn(e)
  }
}

function customFunction(e) {
  console.log(e, this)
}

map.on('load', function() {
  map.on('click', extend(customFunction, {
    customData: 'foo'
  }))
  map.on('click', customFunction.bind({
    customData: 'foo'
  }))
})