title: why leaflet map doesn't render on react app
body: <p>I included leaflet map with <code>js</code> implementation instead of <code>jsx</code> implementation but I have a problem as it overflows its scope.</p>
  
  <p>this is how I imported leaflet:</p>
  
  <pre><code>import L from 'leaflet';
  </code></pre>
  
  <p>and implemented:</p>
  
  <pre><code>componentDidMount() {
      // create map
      this.map = L.map('map', {
        center: [49.8419, 24.0315],
        zoom: 16,
        layers: [
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
          }),
        ]
      });
    }
  </code></pre>
  
  <p>and usage:</p>
  
  <pre><code>&lt;div id={"map"} &gt; 
  </code></pre>
  
  <p>and this is what i got
  <a href="https://i.stack.imgur.com/bc2wq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bc2wq.png" alt="enter image description here"></a></p>