title: How to identify, inside an onClick event handler, which out of many polygons plotted on the same map (using react-leaflet) was clicked?
body: <p><em><strong>Situation:</strong></em>
  I am plotting a country and all its state boundaries on a map using the react-leaflet. I am plotting each state boundary as a polygon (definitions are passed in a JSON file.) using the function . All the state boundary definition is passed in a single JSON file as different JSON objects. Each object has a unique id.</p>
  <p><em><strong>My Code:</strong></em></p>
  <pre><code>import React from 'react'
  import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
  import * as L from &quot;leaflet&quot;;
  
  
  const Map = (props) =&gt; {
  let cordinates = [14.716, -14.467]       // Dispaly coordinates
  return (
      // Cordinates of map 
      &lt;MapContainer center={cordinates} zoom={7} scrollWheelZoom={false}&gt;
           {/* Display map  */}
           &lt;TileLayer
              attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
              url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
          /&gt;
       {/* &lt;GeoJSON id={Math.random()} data={country} /&gt; */}
  
       {/* Highlited area in map  */}
          &lt;GeoJSON data={props.state} onEachFeature={props.handleEachFeature} /&gt;
     &lt;/MapContainer&gt; 
  )
  }
  
  export default Map
  </code></pre>
  <p>I am passing the JSON file and handleEachFeature function(returning the whole JSON file in the console) as props.</p>
  <p><em><strong>What I want to do:</strong></em>
  When a user clicks on the map, I want to clear up the entire map and only plot the state within which the click was. Basically, the state will be zoomed and I also want to plot its district boundaries (I have definitions for the district boundaries for each state as well).</p>
  <p><em><strong>Approach I am taking:</strong></em>
  I am trying to capture the id associated with the polygon (corresponding to the state) that was clicked inside the onClick event. I can then erase the existing map and using the captured id I can plot the state (and its districts) clicked. However, no matter which state is clicked, the onClick event is returning me the whole data of all the polygons. Following is my code:</p>
  <p>On click handleEachFeature function:</p>
  <pre><code> function handleEachFeature(feature, layer) {
           layer.on(&quot;click&quot;, L.bind(handleClick, null, layer));
  }
  
   // This is returning whole json file in console. But, I want only Polygon id on which user clicked. 
   function handleClick(e) {
      console.log(e);
  }
  </code></pre>
  <p><em><strong>Things I already tried:</strong></em></p>
  <ol>
  <li>I used a single JSON file that contains multiple polygons. However, onClick event I get the whole JSON file, not any unique value to identify the polygon.</li>
  <li>I also tried using different JSON files for each polygon (state) and add them to the map one by one but got the same result.</li>
  </ol>
  <p><em><strong>Please suggest any approach using react-leaflet or some other library.</strong></em></p>