title: Custom button on the leaflet map with React-leaflet version3
body: <p>I'm a new leaflet learner with React typescript. Want to create a custom button on the map. On clicking the button a popup will appear. I saw many example but they are all based on older version and I also tried to create my own but no luck. The documentation also not providing much help. Even a functional custom control component is also very effective for my app. Any help on this will be much appreciated. Here is my code,</p>
  <blockquote>
  <p>Custom button</p>
  </blockquote>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { useMap } from &quot;react-leaflet&quot;;
  import L, { LeafletMouseEvent, Map } from &quot;leaflet&quot;;
  
  class Description extends React.Component&lt;{props: any}&gt; {
    createButtonControl() {
      const MapHelp = L.Control.extend({
        onAdd: (map : Map) =&gt; {
          const helpDiv = L.DomUtil.create(&quot;button&quot;, &quot;&quot;); //how to pass here the button name and
          //other property ?
          
          //a bit clueless how to add a click event listener to this button and then
          // open a popup div on the map
  
        }
       
      });
      return new MapHelp({ position: &quot;bottomright&quot; });
    }
  
    componentDidMount() {
      const { map } = this.props as any;
      const control = this.createButtonControl();
      control.addTo(map);
    }
  
    render() {
      return null;
    }
  }
  
  function withMap(Component : any) {
    return function WrappedComponent(props : any) {
      const map = useMap();
      return &lt;Component {...props} map={map} /&gt;;
    };
  }
  
  export default withMap(Description);
  </code></pre>
  <blockquote>
  <p>The way I want to call it</p>
  </blockquote>
  <pre><code>&lt;MapContainer
          center={defaultPosition}
          zoom={6}
          zoomControl={false}
          &gt;
               &lt;Description /&gt;
              
  
               &lt;TileLayer
                  attribution=&quot;Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.&quot;
                  url=&quot;https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png&quot;
              /&gt;
              &lt;ZoomControl position={'topright'}/&gt;
          &lt;/MapContainer&gt;
  </code></pre>