title: How to pass and get additional data/values from react-leaflet Marker?
body: <p>I am adding a group of markers to a map using react-leaflet. At present I can display the markers on the map with a custom icon. How do add a record of data to each marker. I assume I have to somehow create a custom marker class? Does anyone now how I could add a data record to each marker or at least an index.</p>
  
  <p>This is the code so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Map, TileLayer, Marker }  from 'react-leaflet';
  import {Navbar, Nav, NavDropdown}  from 'react-bootstrap';
  import L from 'leaflet';
  import './App.css';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        location: {
          lat: -41.2728,
          lng: 173.2995,
        },
        zoom: 8,
        markersData: [],
        fault: {},
        layers: [],
        bounds: {},
        icon: null
      }
    }
  
    componentDidMount() {
      // Call our fetch function below once the component mounts
      this.callBackendAPI()
      .catch(err =&gt; console.log(err));
    }
  
    componentDidUpdate() {   
      //let marker = CustomMarker();
    }
  
    callBackendAPI = async () =&gt; {
      const response = await fetch('http://localhost:5000/api') 
      const body = await response.json();
      console.log(body.express)
      if (response.status !== 200) {
        throw Error(body.message) 
      }
      return body;
    };
  
    addMarkers(data) {
      let markersData = [];
      let table = [];
      for (var i = 0; i &lt; data.length; i++) {
        const id = data[i].gid
        const fault = data[i].fault
        let record = {id: id, fault: fault};
        table.push(record);
        const position = JSON.parse(data[i].st_asgeojson);
        const lng = position.coordinates[0];
        const lat = position.coordinates[1];
        let latlng = L.latLng(lat, lng);
        markersData.push(latlng);     
      }
      this.setState({markersData: markersData});
      this.setState({fault: table});
      console.log(this.state.markersData[0])
      console.log(this.state.fault)
    }
  
    /**
     * fires when user scrolls mousewheel
     * param - e the mouse event
     **/
    onZoom(e) {
      this.setState({zoom: e.target.getZoom()});
      this.setState({bounds: e.target.getBounds()});    
    }
  
    clickMarker(e) {
      var marker = e.target;
      console.log(marker.getLatLng());
    }
  
    getIcon(zoom) {
      let icon = null;
      if (zoom &lt;= 10) {
        icon = L.icon({
        iconUrl: 'CameraRed_4px.png',
        iconSize: [4, 4],
        iconAnchor: [2, 2],
        });
      } else {
        icon = L.icon({
          iconUrl: 'CameraRed_8px.png',
          iconSize: [8, 8],
          iconAnchor: [4, 4],
          });
      }
      return icon
    }
  
    async loadLayer(e) {
      const response = await fetch('http://localhost:5000/layer', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          latitude: this.state.location.lat,
          longitude: this.state.location.lng,
          menu: e.target.id
        })
      })
      if (response.status !== 200) {
        throw Error(body.message) 
      } 
      const body = await response.json();
      await this.addMarkers(body);
  
    };
  
    customMarker = L.Marker.extend({
      options: {
      id: null,
      type: ''
      }
      });
  
    render() {
      //console.log("render");
      const position = [this.state.location.lat, this.state.location.lng];
      const { markersData } = this.state.markersData;
      console.log(this.state.zoom);
      let icon = this.getIcon(this.state.zoom);
      this.state.icon = icon;
      return (
        &lt;&gt;
          &lt;div&gt;
            &lt;Navbar bg="light" expand="lg"&gt; 
            &lt;Navbar.Brand href="#home"&gt;
              &lt;/Navbar.Brand&gt;
            &lt;Nav&gt;
              &lt;NavDropdown title="Layers" id="basic-nav-dropdown"&gt;
                &lt;NavDropdown.Item id="AddLayer" href="#addlayer" onClick={(e) =&gt; this.loadLayer(e)}
                &gt;Add Layer
  
                &lt;/NavDropdown.Item&gt;
                &lt;NavDropdown.Divider /&gt;
                &lt;NavDropdown.Item href="#action/3.4"&gt;Separated link&lt;/NavDropdown.Item&gt;
              &lt;/NavDropdown&gt;         
            &lt;/Nav&gt;
            &lt;Nav className="ml-auto"&gt;
              &lt;Nav.Link href="#login"&gt;Login&lt;/Nav.Link&gt;
            &lt;/Nav&gt;
            &lt;/Navbar&gt;
          &lt;/div&gt;
          &lt;div className="map"&gt;
          &lt;Map
            ref={(ref) =&gt; { this.map = ref; }}
            className="map"
            markersData={markersData}
            worldCopyJump={true}
            center={position}
            zoom={this.state.zoom}
            onZoom={(e) =&gt; this.onZoom(e)}&gt;
            &lt;TileLayer
              attribution="&amp;amp;copy &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors and Chat location by Iconika from the Noun Project"
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            /&gt;
            {this.state.markersData.map((position, index) =&gt; 
  
            &lt;Marker key={index} position={position} icon={this.state.icon} draggable={false} onClick={(e) =&gt; this.clickMarker(e)}&gt;
          &lt;/Marker&gt;
          )}
          &lt;/Map&gt; 
        &lt;/&gt;
      );
    }
  }
  export default App;  
  </code></pre>
  
  <p><strong>Edit:</strong><br>
  Original question title: Extending react-leaflet marker to create custom marker.</p>