What's the reason the button isn't even clicking?

Question

The button isnt working along with the dropdown option. Any changes I need to make?

import React, { Component, Fragment } from 'react'

export class MegaMenu extends Component {

    constructor(){
        super();
        this.MegaMenu = this.MegaMenu.bind();
    }

    componentDidMount(){
        this.MegaMenu();
    }


    MegaMenu(){
        var acc = document.getElementsByClassName("accordion");
        var accNum = acc.length;
        var i;
        for(i=0;i<accNum;i++){
            acc[i].addEventListener("click",function(){
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if(panel.style.maxHeight){
                    panel.style.maxHeight = null;
                }else{
                    panel.style.maxHeight = panel.scrollHeight+ "px"
                }
            })
        }

    }
  render() {
    return (
      <div className='accordionMenuDiv'>
          <div className='accordionMenuDivInside'>

              <button className='accordion'>
                  <img className='accordionMenuIcon' src="https://cdn-icons-png.flaticon.com/128/739/739249.png" />&nbsp; Mens Clothing
              </button>
              <div className='panel'>
                  <ul>
                      <li><a href="a" className='accordionItem'>Mans T-shirt1</a></li>
                      <li><a href="a" className='accordionItem'>Mans T-shirt2</a></li>
                  </ul>
              </div>

Answer 1

You can use onClick hanlder on react element itself this should work ,

this.handler = (e) => {
e.target.classList.toggle('active');
var panel = e.target.nextElementSibling;
if (panel.style.maxHeight) {
  e.target.nextElementSibling.style.maxHeight = null;
} else {
  e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + 'px';
}};
<button className='accordion' onClick= {this.handler}>

attach the onclick where ever you require for all the classname button if too many button then use event bubbling on a parent element of all the button