How to bind data to a Marker click in React Leaflet?

Question

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:

    markerClick = (e) =>{
            console.log(e.target);
        }

 let markers =null;
        if(this.props.showStations) {
        markers = (

            this.props.stations.data.stations.map((station) =>
                <Marker 
                    position={[station.lat, station.lon]}
                    onClick={this.markerClick.bind(this, station)}>
                </Marker>
                )

        )
        }

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:

App.js

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()=> {
      await fetch('https://gbfs.citibikenyc.com/gbfs/en/station_information.json')
      .then(res => res.json())
      .then(res=>
        this.setState({stations: res, showStations: true}))
    }
    request();
  }

  checkData=()=>{
    console.log(this.state.stations)
    this.state.stations.data.stations.map(e=>{
      console.log(e)
    })
  }

  render() {

    return (
      <div>
          <button onClick={this.checkData}>click me</button>   
          <Leaf 
            viewport={this.state.viewport}
            stations={this.state.stations}
            showStations={this.state.showStations}/>
      </div>
    );
  }
}

export default App;

Leaf.js

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=()=>{
        this.props.stations.data.stations.map(e=>{
          console.log(e)
        })
      }

    markerClick = (e) =>{
        console.log(e.target);
    }

    render() {

        let markers =null;
        if(this.props.showStations) {
        markers = (

            this.props.stations.data.stations.map((station) =>
                <Marker 
                    position={[station.lat, station.lon]}
                    onClick={this.markerClick.bind(station)}>
                </Marker>
                )

        )
        }


        const position = [this.props.viewport.latitude, this.props.viewport.longitude]
        //const position = [40.7484, -73.9857]
        return (
            <div>
                <button onClick={this.checkData}>check props</button>
                <Map center={position} zoom={14}>
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                      {markers}
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>  
            </div>
        );
    }
}

export default Leaf;

Answer 1

Use the eventHandlers function inside the Marker component:

<Marker
  position={[50.5, 30.5]}
  eventHandlers={{
    click: (e) => {
      console.log('marker clicked', e)
    },
  }}
/>

Answer 2

I don't think you want bind. bind is meant to be used to give a function access to this. Normal variables should be used by one of the following methods.

You could inline your function to this:

onClick={() => this.markerClick(station)}

or change the signature of your function and curry it to this:

markerClick = (station) => (e) =>{
  console.log(station);
}

....

onClick={this.markerClick(station)}