React Element is not rendered yet (hence null) and can't scrollTo

Question

Given the following code:

const AutoScrollToToday = (el)=>{
        var a = moment(+moment().year()+"-01-01");
        var b = moment();
        const todaysPosition = b.diff(a,"days");
        const result = todaysPosition * parseFloat(getComputedStyle(document.documentElement).fontSize);
        el.scrollTo({left:result,top:0,behavior:'smooth'});
    }

useEffect(() => {
    const el = document.getElementById("visorVMainDiv"); 
    AutoScrollToToday(el);
}, []);

My intention is that the element autoscroll once it is rendered (it is a calendar-like x-axys long component) and following information on the internet, using useEffect with an empty array should execute code once the component is rendered. However, I get the error Cannot read properties of null (reading 'scrollTo') as the component hasn't been renderer yet. At this point I don't know to to proceed.

MODIFICATION----------(for comment suggestion, not working).

const AutoScrollToToday = (el)=>{
        var a = moment(+moment().year()+"-01-01");
        var b = moment();
        const todaysPosition = b.diff(a,"days");
        const result = todaysPosition * parseFloat(getComputedStyle(document.documentElement).fontSize);
        el.scrollTo({left:result,top:0,behavior:'smooth'});
    }

    useEffect(() => {
        visorVMainDiv !==null && AutoScrollToToday(visorVMainDiv.current);
      }, [visorVMainDiv]);

You should not interact with DOM when using react. Instead use `useRef` and scroll using ref — Rajesh, Aug 30 '22 at 08:22
@Rajesh I just did this: `const visorVMainDiv = useRef();` and set `ref={visorVMainDiv}` on the div. Then I changed last line of AutoScrollToToday function to `visorVMainDiv.current.scrollTo({left:result,top:0,behavior:'smooth'});` and call it inside the use effect, but I got the same result. — Germán, Aug 30 '22 at 08:28
You need to make sure element is rendered. Instead on `useEffect(..., [])`, use `useEffect(..., [ visorVMainDiv ])` — Rajesh, Aug 30 '22 at 08:29
Please @Rajesh check the modification section on the main question I did for you, this way it is still throw an error: `Cannot read properties of undefined (reading 'scrollTo')` — Germán, Aug 30 '22 at 08:39
Where's the rest of the code? You say "the element is not rendered yet" but there is no element shared here. — apokryfos, Aug 30 '22 at 09:31
@apokryfos https://codesandbox.io/s/wizardly-brahmagupta-4yz7c5?file=/src/App.js here is a codesandbox I did fast, it loads no data but works for the question here. For some reason in Codesandbox it works. It maybe is related to the data loading? as It is loading a div by employee by 365 days (so about 18250 divs). — Germán, Aug 30 '22 at 09:50
If there is indeed async loading then maybe you need to add `visorLoading` in your effect dependencies and only attempt to scroll when `visorLoading` is false. As far as I know refs are not like state objects so will not trigger a rerender when one changes however they should be available when the render of the item they are referencing does happen. In your example code `visorLoading` is undefined which is falsy so that branch is never executed meaning the main div is rendered from the start — apokryfos, Aug 30 '22 at 10:26
I didnt get a proper solution to the question but adding visorLoading to the useEffect array worked... so please put it as answer so I can validate it. Thank you! — Germán, Aug 30 '22 at 11:09
@Germán Please have a look at this: https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element — Rajesh, Aug 30 '22 at 12:06

React Element is not rendered yet (hence null) and can't scrollTo

0 Answers0