Help needed to write javascript in react app

Hi Team, I have this javascript code which is used in my html file to rotate a carousel.
Javacsript.js

var angle = 0;
function galleryspin(sign) {
  spinner = document.querySelector("#spinner");
  if (!sign) {
    angle = angle + 45;
  } else {
    angle = angle - 45;
  }
  spinner.setAttribute(
    "style",
    "-webkit-transform: rotateY(" +
      angle +
      "deg); -moz-transform: rotateY(" +
      angle +
      "deg); transform: rotateY(" +
      angle +
      "deg);"
  );
}

The html line which calls this function looks like this.

<div> 
        <p class="Carousel-header">Text
        </p>   
      <base href="1.jpg" />  
        <div id="carousel3D">
          <figure id="spinner">
            <img src="images/1.jpg" alt />
            <img src="images/2.jpg" alt />
            <img src="images/3.jpg" alt />
            <img src="images/4.jpg" alt />
            <img src="images/5.jpg" alt />
            <img src="images/6.jpg" alt />
            <img src="images/7.jpg" alt />
            <img src="images/8.jpg" alt />
            <img src="images/9.jpg" alt />

          </figure>
        </div>
        <div class="carousel-nav">
<span  class="ss-icon  left" onclick="galleryspin('-')"
              >&lt;</span
            >
            <span class="ss-icon  right"onclick="galleryspin('')"
              >&gt;</span
            >
        </div>
    </div>

I want to implement this in react js. I have created the rfce for the

but the code is not working when I click on the < and > buttons to rotate. Looks like the onclick is not calling the galleryspin function. How do I get this to work in react app?

Comments

[ncpa0cpl]

A proper way to achieve what you want would be either: use pure css animation that's triggered by adding and removing a class name from the html element, or use an React Animation library like react-spring.

most of the code that you would use on a pure vanilla JS website won't easily work with React, and you really shouldn't try to hack it together like that, if you use React then do things in the React way

[ksencherey]

Hi @ncpa0cpl, thanks a lot for your help. I have used css animation as you advised to make my 3D carousel rotate and to stop when mouse hovers on any of my images. Your help is greatly appreciated.

[Smitter]

Include the html in public/index.html then add the Javascript inside of use Effect hook. Though as @ncpa0cpl has stated, this is not the way of writing react code

[ksencherey]

Hi @Smitter hane, thanks a lot for you advise. Very much appreciated too. I have used css animation as @ncpa0cpl advised to make my 3D carousel rotate and to stop when mouse hovers on any of my images.