am getting data from websocket for real live update am updating Inside Popup of leaflet map, useEffect start re-render to get new data so the Popup disappears and I need to click again on the mark on map to see updated data, All I want that the data changes without disappearing of the Popup.
Here is the code of the Component called Positions which carry change of Data and Markers on map.
import React, { useEffect, useState } from "react";
import { useGetAllPositionsQuery } from "../../Redux/service/Positions";
import MarkerClusterGroup from "react-leaflet-cluster";
import { Marker, Popup } from "react-leaflet";
import { Icon } from "leaflet";
import PositionsPopups from "./Positions-Popups/PositionsPopups";
import { useGetWebSocketDataQuery } from "../../Redux/service/Websocket";
export default function Positions() {
const { data, isLoading } = useGetAllPositionsQuery();
let [position, setPosition] = useState();
const { data: ws, error, isLoading: wsLoading } = useGetWebSocketDataQuery();
useEffect(() => {
if (ws) {
ws?.positions?.map((i) => {
setPosition([i]);
console.log(i);
});
}
}, [ws]);
Icon.Default.mergeOptions({
iconUrl: "https://freesvg.org/img/car_topview.png",
iconSize: [32, 32], // size of the icon
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -20], // point from which the popup should open relative to the iconAnchor
});
return (
<>
<MarkerClusterGroup chunkedLoading>
{position?.map((mark) => (
<Marker key={mark.id} position={[mark.latitude, mark.longitude]}>
<Popup closeOnEscapeKey>
<PositionsPopups mark={mark} />
</Popup>
</Marker>
))}
</MarkerClusterGroup>
</>
);
}
Code of PositionsPopups Component
import React, { useEffect, useState } from "react";
import PositionsPopupsDetails from "./PositionsPopupsDetails";
export default function PositionsPopups({ mark }) {
const [popupData, setPopupData] = useState(mark);
useEffect(() => {
setPopupData(mark);
}, [mark]);
return (
<>
<div className="device-popup">
{" "}
<PositionsPopupsDetails title="fix time" item={popupData.fixTime} />
<PositionsPopupsDetails
title="speed"
item={popupData.speed.toFixed(2) + ` KM`}
/>
<PositionsPopupsDetails title="address" item={popupData.address} />
<PositionsPopupsDetails
title="total distance"
item={Math.round(popupData.attributes.totalDistance / 1000) + ` KM`}
/>
</div>
</>
);
}
Am trying to only re-render the data in popups not the whole popup component