How to convert HTML template to Reactjs

Question

I've converted a HTML template into React. But some of the icons / dropdowns that can be collapse are not functioning.

Dropdown is stuck

The menu button does not hide the left side bar

I've tried observe the related javascript files for those elements. But I think the errors are not in the javascript. I think maybe I need to use React Hooks to make the menu bar & dropdowns work, but I'm not sure.

Here's the code for the menu button.

<button
        type="button"
        className="btn btn-sm px-3 font-size-24 header-item waves-effect"
        id="vertical-menu-btn"
      >
        <i className="mdi mdi-menu"></i>
      </button>

And here's the javascript code when clicking the menu button

var a;
  n("#side-menu").metisMenu(),
    n("#vertical-menu-btn").on("click", function (e) {
      e.preventDefault(),
        n("body").toggleClass("sidebar-enable"),
        992 <= n(window).width()
          ? n("body").toggleClass("vertical-collpsed")
          : n("body").removeClass("vertical-collpsed");
    }),
    n("body,html").click(function (e) {
      var t = n("#vertical-menu-btn");
      t.is(e.target) ||
        0 !== t.has(e.target).length ||
        e.target.closest("div.vertical-menu") ||
        n("body").removeClass("sidebar-enable");
    }),

This is my first time building a react project using HTML template. Any advice or answers are greatly appreciated. Thank you.

Answer 1

This does not look like React code at all. In React we let the framework manipulate the DOM. But your JS code above appears to be mucking with the DOM. This is not going to go well.

Use of Hooks or not depends on using React correctly. But the above is not that, sorry.