title: TypeError: Cannot read property 'leafletElement' of undefined, React JS
body: <p>:)
  I have a little problem here, and would appreciate any help since i cannot find the problem myself. I built a map with React-Leaflet, where i render certain points inside a bound box.</p>
  <pre><code>        &lt;Map
              style={{ zIndex: 1 }}
              maxZoom={19}
              viewport={viewPort}
              onViewportChanged={onViewportChanged}
              ref={mapRef}
              className=&quot;markercluster-map&quot;
            &gt;
              &lt;TileLayer
                url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
                attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
              /&gt;
              &lt;ClusterGroup clusteredData={clusteredData} setZoom={setViewPort} /&gt;
            &lt;/Map&gt;
  </code></pre>
  <p>I get the bounds with this function:</p>
  <pre><code>const onViewportChanged = (viewport) =&gt; {
      const b = mapRef.current.leafletElement.getBounds();
      setBounds([
        b.getSouthWest().lng,
        b.getSouthWest().lat,
        b.getNorthEast().lng,
        b.getNorthEast().lat,
      ]);
      console.log(bounds)
    };
  </code></pre>
  <p>This functions very well, and i am able to send the bounds to my backend so i can fetch the markers. However, i created another map as a child where i wanna render another set of markers as a heatmap.</p>
  <pre><code>...Map component from above is Parent..
  
  &lt;HeatMap onViewportChanged={onViewportChanged2} ref={mapRef2} /&gt;
  
  ... some more code...
  </code></pre>
  <p>The code from the HeatMap component:</p>
  <pre><code>    &lt;Map
          style={{ zIndex: 1 }}
          maxZoom={19}
          className=&quot;markercluster-map&quot;
          viewport={viewPort}
          onViewportChanged={onViewportChanged}
          ref={ref}
        &gt;
          &lt;HeatmapLayer
            fitBoundsOnLoad
            fitBoundsOnUpdate
            gradient={{
              0.1: first,
              0.2: second,
              0.4: third,
              0.6: fourth,
              0.8: fifth,
              &quot;1.0&quot;: sixth,
            }}
            points={addressPoints}
            longitudeExtractor={(m) =&gt; m[1]}
            latitudeExtractor={(m) =&gt; m[0]}
            intensityExtractor={(m) =&gt; parseFloat(m[2])}
          /&gt;
          &lt;TileLayer
            url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
            attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
          /&gt;
        &lt;/Map&gt;
  
  </code></pre>
  <p>Now i passed viewPortChanged2 and mapRef2 from the parent as props. And when i render the HeatMap component with this function:</p>
  <pre><code>  const onViewportChanged2 = (viewport) =&gt; {
      const b = mapRef2.current.leafletElement.getBounds();
      setBounds([
        b.getSouthWest().lng,
        b.getSouthWest().lat,
        b.getNorthEast().lng,
        b.getNorthEast().lat,
      ]);
      console.log(bounds)
    };
  </code></pre>
  <p>It throws me this error:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'leafletElement'  of undefined</p>
  </blockquote>
  <p>I dont know what causes it..</p>