Collapsible in React

[Pierre314]

Hi,

I am a noobie and I try to create a collapsible element in my React app. I use the code from W3S (https://www.w3schools.com/howto/howto_js_collapsible.asp) in one my JS file, the CSS part works fine but the JS part does not seem to wrok (the panel does not appear or collapse). I must be wrong with how to implement JS in React, even if it is surely utra basic. What should I modify to make it work?

Thousand thanks

 

import React, { Component } from "react";
import Style from "./Aside.module.scss";

let coll = document.getElementsByClassName("collapsible");
let i;

export default class Aside extends Component {
  render() {
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        let content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }

    return (
      <div className={Style.aside}>
        <h2>NAVIGATION</h2>
        <button type="button" class={Style.collapsible}>
          Open Collapsible
        </button>
        <div class={Style.content}>
          <p>Lorem ipsum...</p>
        </div>
      </div>
    );
  }
}

 

Edited April 7, 2022 by Pierre314