title: React-leaflet how to dynamically change Rectangle Color?
body: <p>After rendering the <code>Map</code> I create a series of calls to an API and construct <code>Rectangles</code> from the results. I then change the colors of the <code>Rectangle</code>s based on the scale the user wishes to see.  With vanilla js this was easy as I just kept a reference to all the <code>Rectangles</code> and updated the color property. But with <code>react-leaflet</code> I don't see a way to do the same thing.</p>
  
  <p>HTML (Leaflet CSS here)</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Leaflet CSS --&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /&gt;
  
      &lt;!-- Bootstrap CSS--&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
      &lt;!-- Fullscreen plugin CSS--&gt;
      &lt;link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' crossorigin="anonymous" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div id='app'&gt;&lt;/div&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import App from './components/App';
  
  const appContainer = document.getElementById('app');
  
  ReactDom.render(&lt;App /&gt;, appContainer);
  </code></pre>
  
  <p>App.js (kind of unnecessary for this demo but I will add more to it later)</p>
  
  <pre><code>import React from 'react';
  import MapController from './MapController';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      };
    }
  
   render() {
      return (
        &lt;MapController /&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>MapController.js - wrapper for Map component that adds functionality</p>
  
  <pre><code>import React from 'react';
  import {
    Map, ImageOverlay,
  } from 'react-leaflet';
  import { CRS } from 'leaflet';
  import '../lib/leaflet-fullscreen';
  
    componentDidMount() {
      //After the map renders, start calling the API to create triangles
      this.createColorCodedPriceOverlays();
    }
  
  
    async createColorCodedPriceOverlays() {
        const pageSize = 100;
        let startingIndex = 0;
        const apiCalls = [];
  
        // Need to get the first batch to determine how many listings exist
        // getListings will update the Map on state and return a promise that
        // resolves to the total number of records that exist
        const total = await this.getListings(startingIndex);
  
        // Create the calls needed to get all parcels for sale
        while (startingIndex &lt;= total) {
        startingIndex += pageSize;
        apiCalls.push(this.getListings(startingIndex));
   }
  
        Promise.all(apiCalls);
    }
  
    //Call api and create batch of Rectangles from the results
    async getListings(startingIndex) {
      const response = await fetch('www.foobarApi.io/batchx');
      const json = await response.json();
      const { parcels, total } = json.data;
      let price = (parcels[0] &amp;&amp; parcels[0].publication) ?parcels[0].publication.price : undefined;
      const parcelRectangles = [];
      let rect;
      let i = 0;
  
      parcels.forEach((parcel) =&gt; {
      price = parcel.publication.price;
  
      //Create the &lt;Rectangle
      //Simplified, usually dynamically set color
      rect = (&lt;Rectangle bounds={[[0,0],[100,100]]} color="white" /&gt;)
  
  
      parcelRectangles.push(rect);
      i += 1;
    });
  
  //Set the generated Rectangles on the State so I can get them later
  this.setState((prevState) =&gt; {
    const allParcels = prevState.parcels ? [...prevState.parcels, ...parcelRectangles] : parcelRectangles;
    const totalParcelsRetrieved = prevState.totalParcelsRetrieved + parcelRectangles.length;
  
    return { parcels: allParcels, totalParcelsRetrieved };
  });
  
  return total;
    }
  
  onValueChange(event) {
  / **
  *  So now the user changed some values and I want to alter
  * the color property of the &lt;Rectangles&gt; I have stored in
  * the state. But I don't have anyway of doing this.
  */
  }
  
  render() {
      return (
          &lt;div className="container-fluid"&gt;
              &lt;div className="row map-row"&gt;
                 &lt;Map
                   center={[0, 0]}
                   zoom={3}
                   crs={L.CRS.Simple}
                   minZoom={1}
                   maxZoom={10}
                   bounds={[[-150.5, -150.5], [150.5, 150.5]]}
                   maxBounds={[[-150.5, -150.5], [150.5, 150.5]]}
                   maxBoundsViscosity={2.0}
                   fullscreenControl
                   attributionControl={false}
                   style={{ height: '100%', width: '100%' }}
              &gt;
             //Stored Rectangles on the state to try and update them later
                {this.state.parcels}
                &lt;/Map&gt;
                &lt;UserControlsComponent onValueChange={this.onValueChange.bind(this)}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>