ReactJs - Making A Clock But Handles Dont Want To Rotate Programatically-CodePudding

Hi Its my first post here. Usually scouring I usually find a fix, not this time.

I have a clock Im making in react and I want to rotate some hands based on the time from the .js file. However no matter what I do, even if syntax is correct, nothing happens.

<div className='dial-circle'></div>
<div className='dial-pointer-small' style={{transform: [{ rotate: smallRotate   "deg" }]}}>
   <div className='dial-pointer-small-inner'></div>
</div>```

const [smallRotate, setSmallRotate] = useState();
const [bigRotate, setBigRotate] = useState();

function updateClocks() {
    const time = new Date();
    let hour = time.getHours();
    let minute = time.getMinutes();

    if (hour > 12) {
        hour-=12;
    }

    setSmallRotate(hour / 12 * 360);
    setBigRotate(minute / 12 * 360);
}

useEffect(() => {
        
    updateClocks();
    setInterval(updateClocks, 1000);

}, [])

.dial-circle {
width: 80vw;
height: 80vw;
position: absolute;
top: 10vw;
left: 10vw;
border: 6px solid rgba(245, 184, 66, 0.5);
border-radius: 100%;
}

.dial-pointer-small {
width: 12px;
height: calc( 40vw   20px );
position: absolute;
top: calc( 10vw - 20px );
left: calc( 50vw - 6px );
transform-origin: bottom center;
}

.dial-pointer-small-inner {
width: 100%;
height: 26px;
background-color: rgba(99, 66, 6, 0.9);
}

Any help is appreciated!

CodePudding user response：

Answered by Dominic in comments above.

Transform takes string not array input as I had been doing.

Change style={{transform: [{ rotate: smallRotate "deg" }]}} To style={{ transform: `rotate(${smallRotate}deg)` }}

CodePudding user response：

Change style={{transform: [{ rotate: smallRotate "deg" }]}} to a string style={{ transform: `rotate(${smallRotate}deg)` }}

And clear the interval if your component is unmounted:

useEffect(() => {
  updateClocks();
  const interval = setInterval(updateClocks, 1000);
  return () => clearInterval(interval);
}, [])