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?
We should put useRef result inside useEffect hook
const $target = useRef();
useEffect(() => {
const $component = $target.current.querySelectorAll('a');
}, []);