React jquery .toggleClass() does only work after compiler reloading-CodePudding

I´m trying to build this sideboard for my react application: https://codepen.io/illnino/pen/nwPBrQ . Anyways, I ran into a problem and I´m not able to solve this on my own.

So what is my exact problem ?

This code does NOT work if I try to hover on the sideboard icon as it should. After refreshing the page manually, it doesnt work either. But I noticed, if my react compiler reloads this application (after any change in my file) and I DON'T refresh the page manually, it works.

So .toggleClass() does only work, after my compiler reloads the code. After reloading the page on my own, it doesnt work again.

My Code

My css code is exact the same as on codepen. Of course the javascript and the html code are in the same file. The html code is also the same, so I´ll only give you my JS code (In fact I´m using typescript, but that shouldn't matter):

React.useEffect(() => {
    $(".gn-icon-menu").hover(function () {
        let e = $(".gn-menu-wrapper")
        e.toggleClass("gn-open-part")
      });
  
      $(".gn-menu-wrapper").hover(function () {
        $(this).toggleClass("gn-open-all")
      });
  }, []);

What have I tried ?

I really dont know, what to try. I´ll hope somebody maybe has a clue, what the error could be...

CodePudding user response：

my opinion the usage of jQuery totally breaks the whole advantages of the React itself

CodePudding user response：

JQuery manipulates the DOM, React schedules updates to its own Virtual DOM. You should try to avoid using both. They don't get along with one another. If you write all the styles in a css sheet and then use those, you can achieve the same results.

.gn-menu-wrapper {
    /* Base Styles */
}
.gn-menu-wrapper:hover {
    /* Hover Styles here */
}

Also double check your style sheets are SCSS and not CSS. In this codepen example they are using the format: (&) this will not work in CSS.

&::placeholder{
    color: $f-c;
}