How to rotate an image with 45 degrees by using reactJs

Question

I want to incrementally rotate an image by 45 degrees one time, when the button was clicked, by using reactJs. But I have no clue how to do that. Can anyone give me some tips?

Answer 1

You can keep the current rotation in the state of your component. And add an onClick handler which increments this by 45 at the time. Then use this variable in your render. Here is a quick codepen of how it could be implemented: https://codepen.io/anon/pen/YZrrWM

Answer 2

Just use CSS animations with transform: rotate(45deg);

Add that rule to a new CSS class, then use an event listener in JavaScript on the button that adds the transform to the image.