title: Uncaught TypeError: inst.render is not a function; react-google-maps
body: <p>I am getting the <code>Uncaught TypeError: inst.render is not a function</code> in my React app trying to follow <a href="https://tomchentw.github.io/react-google-maps/" rel="nofollow noreferrer">https://tomchentw.github.io/react-google-maps/</a></p>
  
  <p>src/components/MapShowEmployers.js:</p>
  
  <pre><code>/* global google */
  import _ from "lodash";
  
  import {
    default as React,
    Component,
  } from "react";
  
  import Helmet from "react-helmet";
  
  import {
    withGoogleMap,
    GoogleMap,
    Marker,
  } from "react-google-maps";
  
  /*
   * This is the modify version of:
   * https://developers.google.com/maps/documentation/javascript/examples/event-arguments
   *
   * Add &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt; to your HTML to provide google.maps reference
   */
  const GettingStartedGoogleMap = withGoogleMap(props =&gt; (
        &lt;GoogleMap
          ref={props.onMapLoad}
          defaultZoom={3}
          defaultCenter={{ lat: 30.3, lng: -97.743 }}
          onClick={props.onMapClick}
        &gt;
          {props.markers.map(marker =&gt; (
            &lt;Marker
              {...marker}
              onRightClick={() =&gt; props.onMarkerRightClick(marker)}
            /&gt;
          ))}
        &lt;/GoogleMap&gt;
      ));
  
  
  export default class MapShowEmployers extends Component {
  
    state = {
      markers: [{
        position: {
          lat: 30.4,
          lng: -97.845,
        },
        key: `Austin`,
        defaultAnimation: 2,
      }],
    };
  
    handleMapLoad = this.handleMapLoad.bind(this);
    handleMapClick = this.handleMapClick.bind(this);
    handleMarkerRightClick = this.handleMarkerRightClick.bind(this);
  
    handleMapLoad(map) {
      this._mapComponent = map;
      if (map) {
        console.log(map.getZoom());
      }
    }
  
    /*
     * This is called when you click on the map.
     * Go and try click now.
     */
    handleMapClick(event) {
      const nextMarkers = [
        ...this.state.markers,
        {
          position: event.latLng,
          defaultAnimation: 2,
          key: Date.now(), 
        },
      ];
      this.setState({
        markers: nextMarkers,
      });
  
      if (nextMarkers.length === 3) {
        this.props.toast(
          `Right click on the marker to remove it`,
          `Also check the code!`
        );
      }
    }
  
    handleMarkerRightClick(targetMarker) {
      /*
       * All you modify is data, and the view is driven by data.
       * This is so called data-driven-development. (And yes, it's now in
       * web front end and even with google maps API.)
       */
      const nextMarkers = this.state.markers.filter(marker =&gt; marker !== targetMarker);
      this.setState({
        markers: nextMarkers,
      });
    }
  
    render() {
      return (
        &lt;div style={{height: `100%`}}&gt;
          &lt;Helmet
            title="Getting Started"
          /&gt;
          &lt;GettingStartedGoogleMap
            containerElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            mapElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            onMapLoad={this.handleMapLoad}
            onMapClick={this.handleMapClick}
            markers={this.state.markers}
            onMarkerRightClick={this.handleMarkerRightClick}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I've also tried like </p>
  
  <pre><code>const GettingStartedGoogleMap = () =&gt; {
      withGoogleMap(props =&gt; (
        &lt;GoogleMap
          ref={props.onMapLoad}
          defaultZoom={3}
          defaultCenter={{ lat: 30.3, lng: -97.743 }}
          onClick={props.onMapClick}
        &gt;
          {props.markers.map(marker =&gt; (
            &lt;Marker
              {...marker}
              onRightClick={() =&gt; props.onMarkerRightClick(marker)}
            /&gt;
          ))}
        &lt;/GoogleMap&gt;
      ));
  }
  </code></pre>
  
  <p>based on <a href="https://stackoverflow.com/questions/34196988/reactjs-giving-inst-render-is-not-a-function-error">ReactJS giving inst.render is not a function error</a></p>
  
  <p>The code is at <a href="https://bitbucket.org/codyc54321/anthony-project-react" rel="nofollow noreferrer">https://bitbucket.org/codyc54321/anthony-project-react</a></p>