Recientemente comencé a jugar en React y ahora quiero agregar mi propio JS para un acordeón JS.

 const accordionItemHeaders = document.querySelectorAll(".accordion_item_title"); accordionItemHeaders.forEach(accordionItemHeader => { accordionItemHeader.addEventListener("click", event => { accordionItemHeader.classList.toggle("active"); }); });

Para fines de prueba, he intentado insertar el derecho constante en un archivo contenedor jsx. Funciona de forma intermitente después de guardar la edición en VS Code, pero finalmente se detiene. Además, tengo dos acordeones uno al lado del otro (los mismos nombres de clase...) y cuando el script funciona, solo funciona con uno.

Esto es probablemente muy básico, pero agradecería mucho una respuesta ya que soy un completo novato en este punto.

¡Gracias!