title: React Leaflet: Add markers dynamically
body: <p>How to add markers dynamically to React-Leaflet maps?</p>
  
  <p>I want to add new markers when user clicks on map. And I cannot get it work.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { render } from 'react-dom';
  import Control from 'react-leaflet-control';
  import { Map, Marker, Popup, TileLayer, ZoomControl, ScaleControl } from 'react-leaflet';
  import './Points.scss'
  
  export default class PointsMap extends Component {
    state = {
      lat: 50.2, 
      lng: 30.2,
      zoom: 13,
    }
  
    handleClick = (e) =&gt; {
      this.addMarker();
    }
  
    addMarker() {
  
      // A) Following raises error:  
      var marker3 = L.marker([50.5, 30.5]).addTo(this.refs.map);
  
      // B) With following marker doesn't appear on map:
      const position2 = [50,30];      
      &lt;Marker map={this.refs.map} position={position2} /&gt;
    }
  
    render () {
      const position = [this.state.lat, this.state.lng]
      return (
        &lt;Map ref='map' center={position} zoom={this.state.zoom} onClick=    {this.handleClick} &gt;
          &lt;ZoomControl position="topright" /&gt;
          &lt;ScaleControl position="bottomright" /&gt;
          &lt;TileLayer
        attribution='&amp;copy &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      /&gt;
      &lt;Marker map={this.refs.map} position={position} &gt;
        &lt;Popup&gt;
          &lt;span&gt;A pretty CSS3 popup. &lt;br /&gt; Easily customizable.&lt;/span&gt;
        &lt;/Popup&gt;
      &lt;/Marker&gt;
    &lt;/Map&gt;
  
      )
    }
  }
  </code></pre>
  
  <p>In <strong>addMarker()</strong> I try to add new marker. I try to do that on 2 ways:</p>
  
  <p>A)</p>
  
  <pre><code> var marker3 = L.marker([50.5, 30.5]).addTo(this.refs.map);
  </code></pre>
  
  <p>It raises error:</p>
  
  <pre><code> Uncaught TypeError: map.addLayer is not a function
       at NewClass.addTo (leaflet-src.js:3937)
       at PointsMap.addMarker (Points.js?12f5:54)
  </code></pre>
  
  <p>B)</p>
  
  <pre><code>const position2 = [50,30];      
      &lt;Marker map={this.refs.map} position={position2} /&gt;
  </code></pre>
  
  <p>It doesn't add any new marker and it doesn't raise any error.</p>
  
  <p>Do you have any idea how to add/remove markers dynamically?</p>