El botón no funciona junto con la opción desplegable. ¿Algún cambio que deba hacer?
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" /> 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>Puede usar onClick handler en el elemento de reacción en sí mismo, esto debería funcionar,
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}>adjunte el onclick donde lo requiera para todo el botón de nombre de clase si hay demasiados botones, luego use el burbujeo de eventos en un elemento principal de todo el botón