Is “classList.add()” and toggle and remove a thing in React? Really for the DOM so only if using useRef.
Instead we manage with state, a handler function and some conditional JS in the “className={}” part of the element.
What I did in an early version of my portfolio site:
<div className={${`styles.menuIcon_top} ${isOpen ? menuIcon_top__close : ""}`}></div>
Note: This is how I added two classes in CSS modules although I think you can just put multiple classes in one template literal.
Also Note: I used empty quotes but the article below uses NULL and you can also use the double ampersand strategy as well. Not sure if there is a performance difference here or a best practice.
Important to know the “add/remove/toggle” CSS class technique is an alternative to conditionally showing a different component.
This article here has some examples
Side Note: When using CSS Modules, or Styled Components it is redundant to create BEM-style class naming since this typically ends up in very long class names. Take advantage of the CSS specificity by using shorter class names.