title: How to bind data to a Marker click in React Leaflet?
body: <p>I am trying to bind data so that when I click on a marker I can retrieve a value, specifically an id from a field called "station_id" in a json I am working with. At the moment I am console logging event.target, when a maker is clicked:</p>
  
  <pre><code>    markerClick = (e) =&gt;{
              console.log(e.target);
          }
  
   let markers =null;
          if(this.props.showStations) {
          markers = (
  
              this.props.stations.data.stations.map((station) =&gt;
                  &lt;Marker 
                      position={[station.lat, station.lon]}
                      onClick={this.markerClick.bind(this, station)}&gt;
                  &lt;/Marker&gt;
                  )
  
          )
          }
  </code></pre>
  
  <p>I believe the way to approach this is by binding the markerClick function but I am unsure how to do it properly. Below is my code:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Leaf from './components/Leaf';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        viewport: {
          height: "100vh",
          width: "100vw",
          latitude: 40.7128,
          longitude: -74.0060,
          zoom: 10
        },
        latitude: 40.7128,
        longitude: -74.0060,
        zoom: 10,
        stations: [],
        showStations: false,
        selectedStation: null,
        userLocation: {}
      };
    }
  
    componentDidMount() {
      const request = async()=&gt; {
        await fetch('https://gbfs.citibikenyc.com/gbfs/en/station_information.json')
        .then(res =&gt; res.json())
        .then(res=&gt;
          this.setState({stations: res, showStations: true}))
      }
      request();
    }
  
    checkData=()=&gt;{
      console.log(this.state.stations)
      this.state.stations.data.stations.map(e=&gt;{
        console.log(e)
      })
    }
  
    render() {
  
      return (
        &lt;div&gt;
            &lt;button onClick={this.checkData}&gt;click me&lt;/button&gt;   
            &lt;Leaf 
              viewport={this.state.viewport}
              stations={this.state.stations}
              showStations={this.state.showStations}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Leaf.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
  //import './leaf.css'
  //import InfoBox from './InfoBox';
  import { Button } from 'react-bootstrap';
  //import Search from './Search';
  //import Match from './Match';
  //import Modal from './Modal';
  //import L from 'leaflet';
  //import Routing from "./RoutingMachine";
  //import { Row, Col, Grid, Container } from 'react-bootstrap';
  //import ErrorBoundary from '../ErrorBoundary/ErrorBoundary'
  
  
  
  class Leaf extends Component {
  
  
      checkData=()=&gt;{
          this.props.stations.data.stations.map(e=&gt;{
            console.log(e)
          })
        }
  
      markerClick = (e) =&gt;{
          console.log(e.target);
      }
  
      render() {
  
          let markers =null;
          if(this.props.showStations) {
          markers = (
  
              this.props.stations.data.stations.map((station) =&gt;
                  &lt;Marker 
                      position={[station.lat, station.lon]}
                      onClick={this.markerClick.bind(station)}&gt;
                  &lt;/Marker&gt;
                  )
  
          )
          }
  
  
          const position = [this.props.viewport.latitude, this.props.viewport.longitude]
          //const position = [40.7484, -73.9857]
          return (
              &lt;div&gt;
                  &lt;button onClick={this.checkData}&gt;check props&lt;/button&gt;
                  &lt;Map center={position} zoom={14}&gt;
                      &lt;TileLayer
                          attribution='&amp;amp;copy &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
                          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                      /&gt;
                        {markers}
                      &lt;Marker position={position}&gt;
                          &lt;Popup&gt;
                              A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
                          &lt;/Popup&gt;
                      &lt;/Marker&gt;
                  &lt;/Map&gt;  
              &lt;/div&gt;
          );
      }
  }
  
  export default Leaf;
  </code></pre>