title: How to fire Marker component events programatically from another component
body: <p>Using React Leaflet, I am trying to fire the Marker component's "click" event from a sibling component. In regular leaflet, this is done using something like below: </p>
  
  <pre><code>L.marker(lng,lat).fire('click');
  L.marker(lng,lat).openPopup();  
  </code></pre>
  
  <p>In the "Results" component, I have a list of results that when clicked, I would like to trigger the Marker component's events on the map.   </p>
  
  <pre><code>render() { 
  &lt;Results tileClicked2={this.tileClicked3.bind(this)} items={this.state.items}&gt;&lt;/Results&gt;
  &lt;Map ref={m =&gt; { this.leafletMap = m; }}&gt;
            &lt;TileLayer .../&gt;
               {this.state.items.map((value, index) =&gt; {
                  return (&lt;Marker&gt;...&lt;/Marker&gt;)
               }
  </code></pre>
  
  <p>In my "tileClicked3" function, I am able to log <strong>this.leafletMap</strong> </p>
  
  <pre><code>tileClicked3(index){    
      console.log(index);
      console.log(this.leafletMap)
      //I want to do:
      // marker.fire();
      // marker.openPopup(); 
    }
  </code></pre>
  
  <p>Here is the console log when clicked:</p>
  
  <p><a href="https://i.stack.imgur.com/KJaTV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KJaTV.png" alt="enter image description here"></a></p>
  
  <p>I figure I must be close, but maybe not. </p>
  
  <p>Any advice would be appreciated...</p>