I have a list of refs that is being forwarded to the child components. They seem to work fine as I can do operations with them as feedback to the user actions (in this case, it is scrolling into view). However, I want to scroll to them when component is rendered/mounted, which sounds like a classic ref usage: add ref dependencies to a useEffect and scroll when they are ready. But it basically does not work. When I console.log out the refs, I see the ref.current is assigned. However when I console.log refs[scrollTo], it is undefined. This might be related to how chrome browser consoles work though.
So here is my example code:
const MyComponent = (props) => {
const refs = {
a: useRef<HTMLDivElement>(null),
b: useRef<HTMLDivElement>(null),
c: useRef<HTMLDivElement>(null),
}
useEffect(() => {
if (props.scrollTo && refs[props.scrollTo].current) {
refs[props.scrollTo].current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, [refs.a.current, refs.b.current, refs.c.current]);
return <>
<ChildComponent key='a' ref={refs.a} onClick={
refs.a.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
} />
<ChildComponent key='b' ref={refs.b} onClick={
refs.b.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
} />
<ChildComponent key='c' ref={refs.c} onClick={
refs.c.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
} />
</>
};
refs[props.scrollTo].current always returns null here in the use effect, preventing me to scroll there on load. useCallback solution also does not apply here for me as well, since I need those DOM refs for scrollintoview behaviour on onclicks. What am I missing here?