I can't access html element inside useEffect

Question

I want to generate itinerary control (table element) generated in <RoutingMachine />. But I cannot access html element in useEffect because it still not exist.

const Routing = ({ pointA, pointB }) => {

    const dispatch = useDispatch()

    const createLayer = () => {
        const instance = L.Routing.control({
            waypoints: [
                L.latLng(pointA.position.lat, pointA.position.lng),
                L.latLng(pointB.position.lat, pointB.position.lng)
            ],
            lineOptions: {
                styles: [{ color: "red", weight: 4 }]
            },
        });

        return instance;
    };

    const RoutingMachine = createControlComponent(createLayer);

    useEffect(() => {
        let routeInfo = document.querySelectorAll('tr')
        console.log(routeInfo) // array with 0 elements
    }, []);

    return <RoutingMachine />

};

Alen Vlahovljak · Answer 1 · 2022-04-25T08:41:33.153

0

Can you try this (with useRef()):

const Routing = ({ pointA, pointB }) => {

    const dispatch = useDispatch()
    const mounted = useRef(true)

    const createLayer = () => {
        const instance = L.Routing.control({
            waypoints: [
                L.latLng(pointA.position.lat, pointA.position.lng),
                L.latLng(pointB.position.lat, pointB.position.lng)
            ],
            lineOptions: {
                styles: [{ color: "red", weight: 4 }]
            },
        });

        return instance;
    };

    const RoutingMachine = createControlComponent(createLayer);

    useEffect(() => {
        if (mounted.current) {
          let routeInfo = document.querySelectorAll('tr')
          console.log(routeInfo) // array with 0 elements
        }

        return () => {
          mounted.current = false;
        }
    }, [mounted]);

    return <RoutingMachine />

};

edited Apr 25 '22 at 08:41

answered Apr 25 '22 at 08:21

Alen Vlahovljak

542
3
16

1

Still getting empty NodeList. It is not empty when use setTimeout, but I looking for better solution. – chekash Apr 25 '22 at 08:32
Did you try to add `mounted` as a `useEffect()` dependency? Also, try to log before the if statement and see if there is a case when the NodeList is populated. – Alen Vlahovljak Apr 25 '22 at 08:34
I cannot see the rest of the code, but I see you're using React Leaflet. As I can see from the documentation: `React does not render Leaflet layers to the DOM, this rendering is done by Leaflet itself. React only renders an
element when rendering the MapContainer component and the contents of UI layers components.` You should check if this is a problem.
– Alen Vlahovljak Apr 25 '22 at 08:46
1

I didn't know that before, thanks – chekash Apr 25 '22 at 08:58
Ok, I can see the code now. It seems that is the problem with the way Leaflet behaves. I think you have to create a reference on a RoutingMachine component, or try to wrap it with a
, and place the ref on the
. – Alen Vlahovljak Apr 25 '22 at 09:00
You can check [this](https://stackoverflow.com/questions/59743050/react-leaflet-placing-map-control-components-outside-of-map) for a reference. – Alen Vlahovljak Apr 25 '22 at 09:05

Osama Malik · Answer 2 · 2022-04-25T09:57:03.723

0

You can use references supported by leaflet, checkout this Reference

edited Apr 25 '22 at 09:57

answered Apr 25 '22 at 09:24

Osama Malik

267
2
6

I can't access html element inside useEffect

2 Answers2