title: How do I setState in my react-leaflet component
body: <p>I cannot update state in my <code>componentDidMount</code> using <code>setState</code>. I have an axios call that handles the asynchronous call to my api and loads an anonymous function which should update state when the user clicks on the <code>geoJSON</code> layer. For some reason the redux store is not being updated on click and remains the initial state of an empty string. My code is below</p>
  <pre><code>import React from 'react';
  import L from 'leaflet';
  import {apiKey} from './apiKey';
  import { connect } from 'react-redux';
  import axios from 'axios';
  import {districtStyle, districtHighlightStyle, mapStyle} from './styles';
  
  class Map extends React.Component {
  
    componentDidMount() {
  
      let districtsJSON = null;
  
      this.map = L.map('map').setView([31.15, -99.90], 6);
  
      L.tileLayer(`https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=${apiKey}`, {
        attribution: 'Pioneer Basemap by Thunderforest, a project by Gravitystorm Limited.'
      }).addTo(this.map);
  
  
      const districtsUrl = 'http://localhost:8000/gerrymander/api/districts/';
      axios.get(districtsUrl).then(
        response =&gt; {
          districtsJSON = response.data;
  
          const txDistricts = L.geoJson(districtsJSON, {
            style: districtStyle,
            onEachFeature: (feature, layer) =&gt; {
              layer.on({
                click: (e) =&gt; {
                  if (lastClickedLayer !== e.target) {
                    txDistricts.setStyle(districtStyle);
                  }
                  e.target.setStyle(districtHighlightStyle);
                  let lastClickedLayer = e.target;
                  // Set state to the target layer's clicked district
                  this.setState({ district: e.target.feature.properties.namelsad })
                }
              });
            }
          }).addTo(this.map);
        }
      )
      console.log(this.props.district);
    }
  
    render() {
      return &lt;div id=&quot;map&quot; style={mapStyle}&gt;&lt;/div&gt;
    }
  }
  
  
  const mapStateToProps = state =&gt; {
    return {
      district: state.district,
    }
  }
  
  export default connect(mapStateToProps)(Map);
  </code></pre>