I recently made the transition to React and now I am in the process of converting my old vanillaJS website into ReactJS.
One issue I am facing is with a button that is supposed to trigger the opening of a dropdown menu.
<button
type="button"
onClick={() => setMenuOpen(!isMenuOpen)}
ref={menuBtn}>menu</button>
Further down in the DOM structure, I have:
{
isMenuOpen ?
<nav style={{
top: menuBtn.current.offset().top + menuBtn.current.outerHeight(),
left: menuBtn.current.offset().left + (menuBtn.current.outerWidth() / 2)
}}>
...
</nav>
: null
}
In addition to this, I have the following code snippet:
const [isMenuOpen, setMenuOpen] = useState(false)
let menuBtn = React.createRef()
placed at the beginning of my function Component.
However, despite implementing all these changes, the functionality does not work as intended.
The error message I receive is:
TypeError: Cannot read property 'offset' of null
Moreover, I believe that even if this issue was resolved, it would not be responsive. As when the user clicks on the button and then resizes the window, the menu will not adjust accordingly to the new position of the button.
Your assistance is greatly appreciated!