Getting ClassList value of null when toggling mobile menu - reactjs

Question

I'm working on building a responsive mobile navigation menu, and ran into an error with toggling open/close
The way I decided to go about it is to add className="show" that has a property of display: block to what's currently active, and className="hide" with a property of display: none.
This is my set up:
import {MenuOpen, MenuClose} from '../assets/AssetsIndex';
function menuActive() {
let menu = document.getElementById('mobile-menu');
let menuOpen = document.getElementById('menu-open');
let menuClose = document.getElementById('menu-close');
menu.classList.contains('active') ? open() : close();
function close() {
menu.classList.add('active');
menuClose.classList.add('show');
menuOpen.classList.add('hide');
menu.style.transform = 'translateX(0%)';
}
function open() {
menu.classList.remove('active');
menuOpen.classList.add('show');
menuClose.classList.add('hide');
menu.style.transform = 'translateX(100%)';
}
}
Initializing the menu icon with the class name:
<MenuOpen className='menu show' onClick={menuActive} id='menu-resting' />
<MenuClose className='menu hide' onClick={menuActive} id='menu-open' />
Scss:
.menu {
cursor: pointer;
margin: 0 auto;
position: absolute;
right: 2%;
z-index: 100;
&:hover path {
fill: #fff;
}
path {
fill: #fff;
}
}
.show {
display: block;
}
.hide {
display: none;
}
Error:
I went about displaying the menu container in the same way, so I'm not sure why I can't do the same with an SVG element. I've tried adding the properties with JS but ran into the same issue of the property value is null.
If anyone can tell me what I'm doing wrong that would be greatly appreciated.

Answer 1

There is no element with id menu-close in your code. Probably a typo. Assuming id prop of the MenuClose component is the id of the underlying element you have menu-open there.
Also, I would suggest using state hook for controlling whether the Menu is open or closed.