title: Adding Searchbar with leaflet-geosearch
body: <p>I'm trying to add a search bar using <code>leaflet-geosearch</code> to my Leaflet Map in React (<code>react-leaflet</code>)</p>
  
  <pre><code>import { Map, TileLayer, MapControl } from 'react-leaflet'
  import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'
  
  class Search extends MapControl {
    createLeafletElement() {
      return GeoSearchControl({
        provider: new OpenStreetMapProvider(),
        style: 'bar'
      })
    }
  }
  
  ...
  
  export class MapContainer extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Map
            ref={m =&gt; { this.leafletMap = m; }}
            center={this.state.position}
            zoom={this.state.zoom}
          &gt;
            &lt;TileLayer
              attribution={tilesAttr}
              url={tilesUrl}
            /&gt;
            &lt;Search /&gt;
          &lt;/Map&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>When I run this I get a TypeError:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'map' of undefined
    Search.componentDidMount</p>
  
  <pre><code>};
  
  MapControl.prototype.componentDidMount = function componentDidMount() {
  -&gt; this.leafletElement.addTo(this.props.leaflet.map);
  };
  
  MapControl.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
  </code></pre>
  </blockquote>
  
  <p>Has anyone had success adding a search bar to their leaflet map?</p>