title: React-leaflet - add/remove style to CircleMarker on click
body: <p>I am working with react-leaflet to show some data points as circles on a map. I am trying to add a click function to <code>&lt;CircleMarker&gt;</code> so when a circle is clicked, it will add a className "active" and when another circle is clicked, it will remove the "active" class from the previously clicked circle and add the "active" class to the newly clicked circle. </p>
  
  <p>I have a handleClick function that gets the clicked element and setState on the "selected" property with that element. I thought I could just do something like <code>className={ selected.id === data.id ? "active" : "inactive" }</code> for each <code>&lt;CircleMarker&gt;</code>, but it is not switching to the "active" class but stays "inactive" on every click. I checked my css and "active" class works, and the click function is properly firing. Please help!! Here is the simplified version of my code:</p>
  
  <pre><code>class MapComponent extends Component {
        constructor(props){
          super(props)
          this.state = {
            selected: {}
          }
          this.handleClick = this.handleClick.bind(this)
        }
  
        handleClick(data, e) {
          this.setState({ selected: data })
        }
  
        render(){
          const { myData } = this.props;
          const { selected } = this.state;
  
          return (     
            &lt;div&gt;  
              &lt;Map center="xxxxx" zoom=11&gt;
                &lt;TileLayer url="xxxxx" attribution="xxxxx" /&gt;
                {
                  myData &amp;&amp; myData.values.map(data =&gt; {
                    return (
                      &lt;CircleMarker
                        className={ selected.id === data.id ? "active" : "inactive" }
                        key={ data.id }
                        center={ new L.latLng(data.latitude, data.longitude) } 
                        radius=10
                        color="red"
                        value={ data.id }
                        onClick={ (e) =&gt; this.handleCircleClick(data, e) }
                      &gt; 
                      &lt;/CircleMarker&gt;
                    )
                  })
                }
              &lt;/Map&gt;
            &lt;/div&gt;
          )
        }
      }
  </code></pre>