title: Rotate image with respect to arrow key react js
body: <p>I am new to react js. I am trying to rotate an image by clicking an arrow key.
  Someone help me out and also share some documentation for learning react js.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>My code</strong></p>
  
  <p><strong>.js</strong></p>
  
  <pre><code>import React from 'react';
  import Ballimg from '../Image/ImageMovement.gif'
  import Style from '../Style/ImageComponentStyle.module.css'
  
  class Ball extends React.Component{
      constructor(props){
          super(props);
          this.handleKeyDown = this.handleKeyDown.bind(this)
          this.state = {
              imageDirection: Style.right
          };
      }
      handleKeyDown(e){
          if(e.KeyCode === 37){
              this.setState({imageDirection : Style.left})
          }
          else if(e.KeyCode === 38){
              this.setState({imageDirection : Style.up})
          }
          else if(e.KeyCode === 39){
              this.setState({imageDirection : Style.right})
          }
          else if(e.KeyCode === 40){
              this.setState({imageDirection : Style.down})
          }
      }
      render(){
          return(
              &lt;div&gt;
                  &lt;img src={Ballimg} alt="ball movement" className={this.state.imageDirection} onKeyDown={this.handleKeyDown}/&gt;
              &lt;/div&gt;
          );   
      }
  }
  export default Ball;
  </code></pre>
  
  <p><strong>.module.css</strong></p>
  
  <pre><code>.down {
      transform: rotate(90deg);
  }
  .left {
      transform: rotate(180deg);
  }
  .up {
      transform: rotate(-90deg);
  }
  .right{
      transform: rotate(0deg);
  }
  </code></pre>