title: Convert working VueJS component to ReactJS
body: <p>I have a Vue <a href="https://jsfiddle.net/guanzo/d6vashmu/6/" rel="nofollow noreferrer">component</a> that works just fine. Now I'm trying to convert that code to ReactJS <a href="https://jsfiddle.net/iamanoopchandran/d4g19zo9/4/" rel="nofollow noreferrer">equivalent</a>. My attempt on React<br></p>
  
  <pre><code> var ticksArray = Array.apply(null, {length: 27}).map(Number.call, Number);
   export default class Timer extends Component {
   constructor(props) {
    super(props);
    this.state = {
      angle:250,
      minangle:0,
      maxangle:270,
      xDirection:"",
      yDirection:"",
      oldX:0,
      dragging: false
    }
  }
  onMousedown(){
    this.setState({dragging : true});
  }
  onMouseup(){
    this.setState({dragging : false});
  }
  onMousemove(e){
      if(!this.state.dragging)
        return;
      this.setState({
        xDirection : this.state.oldX &lt; e.pageX ? 'right' : 'left',
        oldX:e.pageX,
        yDirection: this.state.xDirection === 'left' ? 'down' : 'up'
      });
      if(this.state.yDirection === 'up' &amp;&amp; this.state.angle + 2 &lt;= 
      this.state.maxangle)
          this.setState({angle:this.state.angle += 2})
      else if(this.state.yDirection === 'down' &amp;&amp; this.state.angle - 2 &gt;= 
      this.state.minangle)
          this.setState({angle:this.state.angle -= 2})
  }
  knobStyle(){
    return {
      'transform':'rotate('+this.state.angle+'deg)'
      }
  }
  activeTicks(){
    return (Math.round(this.state.angle / 10) + 1);
  }
  currentValue(){
    return Math.round((this.state.angle/270)*100) + '%'
  }
  componentDidMount(){
    document.addEventListener('mouseup',this.state.onMouseup)
    document.addEventListener('mousemove',this.state.onMousemove)
  }
  render() {
      var tickDivs = ticksArray.map(function(item) {
          return (
              &lt;div key={item} className="tick"&gt;&lt;/div&gt;
          );
      });
      return (
          &lt;div id="timer"&gt;
              &lt;div className="knob-surround"&gt;
                  &lt;div className="knob"&gt;&lt;/div&gt;
                  &lt;span className="min"&gt;Min&lt;/span&gt;
                  &lt;span className="max"&gt;Max&lt;/span&gt;
                  &lt;div className="ticks" className="n &lt;= activeTicks ? 
      'activetick' : ''"&gt;
                      {tickDivs}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>It's not working. I'm missing something. I'm assuming the problem lies in this code bit.</p>
  
  <pre><code>&lt;div className="ticks" className="n &lt;= activeTicks ? 
          'activetick' : ''"&gt;
  </code></pre>
  
  <p>Please help fix this.</p>