How to traverse in nested elements of React ref

Question

Hello I'm trying to get all a tags inside #header-nav

const HeaderNav = (props) => {
// setState
const $target = useRef(null);
const $component = $target.current.querySelectorAll('a');

return (
    <nav id='header-nav' ref={$target}>
        <div id='shortcuts'>
            <a className='resources' href='#'>
                <span>0</span>
                <WidgetsIcon />
            </a>
            <a className='trash' href='#'>
                <DeleteSweepIcon />
            </a>
            <a className='history' href='#'>
                <RestoreIcon />
            </a>
        </div>
    </nav>)}

but running querySelectorAll on Ref.current doesn't work

    const $target = useRef(null);
    const $component = $target.current.querySelectorAll('a');

It returns null, probably because querySelectorAll refers to live nodes which haven't been rendered yet Also since I have many a tags (like 20), putting multiple different refs and creating an array of refs doesn't seem like a best solution

How can I traverse inside ref result?

Answer 1

We should put useRef result inside useEffect hook

const $target = useRef();
    useEffect(() => {
        const $component = $target.current.querySelectorAll('a');
    }, []);