Mapbox GL JS + React: Reactive Tooltip

See https://github.com/mapbox/mapbox-react-examples/

by dollysingh3192

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css">
<script src="https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<div id="app"></div>

Babel + JSX

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

        class Tooltip extends React.Component {
            handleClick(e) {
                console.log("hi");
            }
            render() {
                const { features } = this.props;

                const renderFeature = (feature, i) => {
                    return (
                        <div key={i}>
                            <strong className='mr3'>{feature.layer['source-layer']}:</strong>
                            <span className='color-gray-light'>{feature.layer.id}</span>
                        </div>
                    )
                };

                return (
                    <div onClick={(e) => this.handleClick(e)} className="flex-parent-inline flex-parent--center-cross flex-parent--column absolute bottom">
                        <div className="flex-child px12 py12 bg-gray-dark color-white shadow-darken10 round txt-s w240 clip txt-truncate">
                            {features.map(renderFeature)}
                        </div>
                        <span className="flex-child color-gray-dark triangle triangle--d"></span>
                    </div>
                );
            }
        }

        class Application extends React.Component {
            tooltipContainer;

            setTooltip(features) {
                if (features.length) {
                    ReactDOM.render(
                        React.createElement(
                            Tooltip, {
                            features
                        }
                        ),
                        this.tooltipContainer
                    );
                } else {
                    ReactDOM.unmountComponentAtNode(this.tooltipContainer)
                }
            }

            componentDidMount() {

                // Container to put React generated content in.
                this.tooltipContainer =...