Source: components/userComponents/maps/MapUsageExample.js

import React from "react";
import { SimpleHereMap } from './SimpleHereMap';

/**
* To use map, for example add marker or listener
* call methods of child component SimpleHereMap,
* source:
* https://stackoverflow.com/questions/37949981/call-child-method-from-parent
*
* See commented lines below
 * @extends Component
 * @hideconstructor
 */
export class MapUsageExample extends React.Component {

  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);
    /** Initialize React ref to map */
    this.hereMap = React.createRef();
  }

  /**
   *
   * @param event
   */
  onMapClick = (event) => {
    /** Call method of child (map) example */
    let coords = this.hereMap.current.screenToGeo(event.currentPointer.viewportX, event.currentPointer.viewportY);
    let marker = new window.H.map.Marker(coords);
    this.hereMap.current.addObjectToMap(marker);
  };

  /**
   *
   */
  componentDidMount() {
    this.hereMap.current.addEventListenerToMap('pointerdown', this.onMapClick)
  }

  /**
   *
   */
  componentWillUnmount() {
    this.hereMap.current.removeEventListenerFromMap('pointerdown', this.onMapClick);
  }

  /**
   */
  render() {
    return (
      <div className="content-wrapper">
        <section className="content-header">
          {/**SimpleHereMap must have ref attribute!*/}
          <SimpleHereMap width="800px" height="400px" ref={this.hereMap}/>
        </section>
      </div>
    )
  }
}