How to flyTo and then getBounds around location based on selected location in react-leaflet

Question

How can i zoom on particular location or flyTo that particular location dynamically when location selected dynamically from list of cities dropdown and the getBounds around that location. I am trying to reference this answer but this can work after flyTo happens. So how can use flyTo with my code.

    useEffect(() => {
  const cityFilter = () => {
    let geocodes = JSON.parse(sessionStorage.getItem('geocode'));
    let mapData = props.allEquipData.filter((filtered) => {
      return filtered.city === selectedCity;
    });
    Promise.all(
      mapData.map(async (data) => {
        let selectedLocGeo = geocodes.filter((geo) => geo.zip == data.zipcode);
        if (selectedLocGeo.length > 0) {
          data.coordinates = [selectedLocGeo[0].latitude, selectedLocGeo[0].longitude];
        } else {
          data.coordinates = [0, 0];
        }
        return data;
      })
    )
      .then((response) => {
        let markerData = [];
        let count = 1;
        response.map((resp, index) => {
          if (resp.coordinates[0] !== 0 && resp.coordinates[1] !== 0) {
            let existingPositionIndex = markerData.findIndex(
              (mark) =>
                mark.positions && mark.positions.length && mark.positions[0] === resp.coordinates[0] && mark.positions[1] === resp.coordinates[1]
            );
            if (existingPositionIndex > -1) {
              markerData[existingPositionIndex].devices.push(resp);
            } else {
              let obj = {
                positions: resp.coordinates,
                key: 'marker' + count,
                devices: [resp],
                location: resp.city + ', ' + resp.state,
              };
              markerData.push(obj);
              count++;
            }
          }
        });

        // let group = new L.featureGroup([markerData[0].positions]);
        // mapRef.firBounds(group.getBounds());
        // console.log('oth position : ', markerData[0].positions);

        // const map = mapRef.current;
        // // console.log('map : ',map.leafletElement.flyTo);
        // // var group = new L.featureGroup([L.marker(markerData[0].positions)]);
        // // if (map) map.leafletElement.fitBounds(group.getBounds());

        // if (map) {
        //   map.flyTo(markerData[0].positions, 10);

        setFilteredMarkers(markerData);
      })
      .catch((err) => {
        console.log('Err', err);
      });
  };
  cityFilter();
}, [selectedCity]);

<Map
  center={position}
  zoom={5}
  maxZoom={100}>
  <LayersControl position='topright'>
    <LayersControl.Overlay name='Markers' checked>
      <LayerGroup>
        <MyMarkersList markers={handleMarkers(markerData)} />
      </LayerGroup>
    </LayersControl.Overlay>
  </LayersControl>
</Map>

when city will be selected from dropdown, the useEffect will be called and then it will get you the markers position based on selected city e.g [lat,log]. from this point it should flyTo that location and getBounds around it if possible.

Answer 1

Add these two lines of code before setFilteredMarkers(markerData);

const {latitude, longitude} = geoCodes.find(g => g.city === selectedCity)
 map.flyTo([ longitude,latitude], 12);

You want to find the coordinates of the selected city which is inside geoCodes Object[]. You use array.find using the value of th eselectedCity to achieve that. This will be triggered every time the value in the dropdown changes.

Updated Demo