title: Dynamically update polyline with new map click with reactjs and leaflet
body: <p>I'm new to reactjs and leaflet and working on building a "route mapping" application. Currently, I have one to two points in an array of points (mapPoints) that updates each time I click on the map. (ie. the markers update to reflect new map click.) These are a state in my class (<code>this.state.mapPoints</code>), which is updated via <code>setState</code> each time the map is clicked. I am trying to dynamically update a polyline between these two points each time the map is clicked. I figured that by calling a function to return the new marker positions as the polyline positions if there are sufficient points using <code>this.state.mapPoints</code>. </p>
  
  <p>While the function reads in <code>this.state.mapPoints</code> correctly, and is therefore updating correctly, the polyline will not dynamically update, and remains drawn where it was initially drawn between the first set of two points. How can I update the polyline to be drawn between the newly updated <code>mapPoints</code> state? (I have summarized pieces of the code via comments for simplicity.)</p>
  
  <pre><code>//code for imports, etc, here
  
  
  constructor(props) {
      super(props);
  
      this.addMarker = this.addMarker.bind(this);
      this.getClientLocation = this.getClientLocation.bind(this);
      this.getMapPoints = this.getMapPoints.bind(this);
  
      this.state = {
          mapPoints: [this.getClientLocation()],
      };
  }
  
  
  /*
  
  other render() code is here to render leaflet map and webpage/application
  
  */
  
  
  renderLeafletMap() {
      return (
          &lt;Map
              center={this.state.mapPoints[0]}
              zoom={this.state.zoom}
              onClick={this.addMarker}
              style={{height: MAP_STYLE_LENGTH, maxWidth: MAP_STYLE_LENGTH}}&gt;
              &lt;TileLayer url={MAP_LAYER_URL} attribution={MAP_LAYER_ATTRIBUTION}/&gt;
              {this.getMarker(this.state.mapPoints)}
              &lt;Polyline color={'red'}
                        positions={this.getMapPoints(this.state.mapPoints)}/&gt;
          &lt;/Map&gt;
      )
  }
  
  getMapPoints(markerPositions) {
      console.log(markerPositions); //this line successfully reflects the current state of mapPoints when the application runs
      if (markerPositions.length &gt;= 2)
          return markerPositions;
      else
          return [[0,0],[0,0]];
  }
  
  
  addMarker(mapClickInfo) {
      let updatedArray = this.state.mapPoints;
      if(updatedArray[1]){
          updatedArray[0] = updatedArray[1];
          updatedArray[1] = mapClickInfo.latlng;
      }else {
          updatedArray[1] = mapClickInfo.latlng;
      }
      this.setState({mapPoints: updatedArray});
  }
  
  
  
  getClientLocation() {
      if(!navigator.geolocation) {
          alert.show("Your browser does not support geolocation.");
      } else{
          navigator.geolocation.getCurrentPosition(
              position =&gt; {
                  const currentLocation = L.latLng(position.coords.latitude, position.coords.longitude);
                  let updatedArray = this.state.mapPoints;
                  updatedArray[0] = currentLocation;
                  this.setState({mapPoints: updatedArray});
              }
          );
      }
  }
  
  /* 
  
  other code to set initial mapPoints, etc, here
  
  */
  </code></pre>