title: How to use leaflet-polylinedecorator in react 16.4.1
body: <p>I'm trying to use the leaflet plugin polylinedecorator in react 16.4.1 (so without hooks). However, the only example I have been able to find on how to use this plugin in react is using hooks (see: <a href="https://stackoverflow.com/questions/56411133/how-to-use-polylinedacorator-with-react-leaflet/56431136#56431136">How to use polylinedacorator with react leaflet</a>), and I am unsure how I can adapt this to be able to use it in my code.</p>
  
  <p>What I have so far is this polylinedecorator component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Polyline } from "react-leaflet";
  import L from "leaflet";
  import "leaflet-polylinedecorator";
  
  export default class PolylineDecorator extends Component {
    componentDidUpdate() {
      if (this.props.map) {
          const polyline = L.polyline(this.props.positions).addTo(this.props.map);
  
          L.polylineDecorator(polyline, {
              patterns: [
                  {
                    offset: "100%",
                    repeat: 0,
                    symbol: L.Symbol.arrowHead({
                      pixelSize: 15,
                      polygon: false,
                      pathOptions: { stroke: true }
                    })
                  }
                ]
          }).addTo(this.props.map);
      }
    }
  
    render() {
      return &lt;&gt;&lt;/&gt;;
    }
  }
  </code></pre>
  
  <p>That I am using like this: </p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Polyline, LayerGroup } from "react-leaflet";
  import PolylineDecorator from "./PolylineDecorator";
  
  export default class RouteLayer extends Component {
    render() {
      const { beginLocations } = this.props;
      const locations = [];
      const differentLocations: [];
  
      beginLocations.forEach((location, index) =&gt; {
        // some filtering going on here and pushing the locations to one of the 
           two arrays (locations, differentLocations)
      });
  
      return (
        &lt;LayerGroup&gt;
          &lt;PolylineDecorator
            map={this.props.map}
            positions={locations}
            color="#4e5c8d"
            interactive={false}
          /&gt;
          &lt;PolylineDecorator
            map={this.props.map}
            positions={differentFloorLinesLocations}
            color="red"
            interactive={false}
          /&gt;
        &lt;/LayerGroup&gt;
      );
    }
  }
  </code></pre>
  
  <p>The RouteLayer is nested inside the map as follows (for simplicity some components are left out):</p>
  
  <pre class="lang-js prettyprint-override"><code> &lt;LeafletMap
       ref={r =&gt; {
         this.map = r;
         if (this.props.setRefMap) {
           this.props.setRefMap(r);
         }
       }}&gt;
       &lt;RouteLayer
          map={this.map ? this.map.leafletElement : null}
          locations={locations}
        /&gt;
   &lt;/LeafletMap&gt;
  
  </code></pre>
  
  <p>Right now the polylines are drawn, however not quite as expected since the filtering doesn't seem to work (this filtering worked fine when I was just using polylines without the decorator). 
  The arrows I am trying to decorate the lines with are showing up, so that's good. However, I'm not happy with how the PolylineDecorator class is looking right now, this doesn't seem like the correct way to do this. 
  I'm also unsure if it is correct to pass the reference to the map in the way that I'm doing here.
  Any suggestions on how to make this work correctly are appreciated.</p>