Currently, I have an array of equipment that is being displayed using Array.map. Additionally, I am utilizing a Context API that contains a state [selectedEquipmentId, setSelectedEquipmentId].
The objective is to trigger the setSelectedEquipmentId(equipmentId) function when clicking on the
function Map() {
const equipmentsPositions = useContext(EquipmentsPositionContext);
const setSelectedEquipmentId = useContext(EquipmentIdContext);
const center: LatLngExpression = [-19.151801, -46.007759];
function getEquipmentById(equipmentId: string) {
const filteredEquipment = equipmentsStateHistory.filter(
(equipment) => equipment.equipmentId === equipmentId
);
return filteredEquipment[0];
}
return (
<Box h="100vh" w="80%">
<MapContainer
center={center}
zoom={10}
scrollWheelZoom={true}
style={{ height: "100%", width: "100%" }}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{equipmentsPositions?.map((equipmentPosition) => {
const equipment = getEquipmentById(equipmentPosition.equipmentId);
return (
<Marker
onClick={() => {setSelectedEquipmentId(equipment.equipmentId)}}
key={equipment.equipmentId}
position={[
equipmentPosition.positions[equipmentsPositions.length - 1].lat,
equipmentPosition.positions[equipmentsPositions.length - 1].lon,
]}
>
<Popup>
<Text as="span" color={equipment.color}>
{equipment.name}
</Text>
</Popup>
</Marker>
);
})}
</MapContainer>
</Box>
);
}
export default Map;
In addition, here is the Context required for reference:
interface ISelectedEquipmentIdContext {
selectedEquipmentId: string | ReactNode;
setSelectedEquipmentId: React.Dispatch<React.SetStateAction<string>>
}
export const EquipmentIdContext = createContext<ISelectedEquipmentIdContext | null>(
null
);
export function EquipmentIdProvider({ children }: IProps) {
const [selectedEquipmentId, setSelectedEquipmentId] = useState<string>("");
return (
<EquipmentIdContext.Provider value={{ selectedEquipmentId: selectedEquipmentId, setSelectedEquipmentId: setSelectedEquipmentId }}>
{children}
</EquipmentIdContext.Provider>
);
}
I have exhausted various attempts, but to no avail in resolving the issue.