The map is not changing when I change the country

[codeiotic]

When I tried to change the country, the information in the infoboxes changes but the map remains as it is in its original position. Please help me with this by sharing how you did it.

[Ritesh123dx]

https://stackoverflow.com/questions/64736789/react-leaflet-map-doesnt-update

[Chandan-CV]

hopefully, this code snippet should help

const [map,setmap]=useState(null);
  if(map)
    {
      map.flyTo(center);
     }
  return (

      <div>
      <div className="map" id="map">
      <MapContainer  center={center} zoom={zoom} whenCreated={setmap} maxZoom={8} >

      <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
    {(countries)?ShowDataOnMap(countries,casesType):null}

       </MapContainer>
      </div>

      </div>

[TT-7]

Leaflet changed their map component, its now called Map container and its props are immutable, in other words you cant change the center and zoom in using its props. So you would have to write a seperate function for that.