title: React JS - Live clock update
body: <p>I've got a clock function that gets time and renders out the hours, minutes and seconds, and I'm trying to update the data on screen in real time, but for some reason my setInterval function isn't doing what I expect.</p>
  
  <p>I thought react's render method is supposed to render data in real time. Do I need ajax for this? Can anyone offer some advice?</p>
  
  <pre><code>var CityRow = React.createClass({
  
    render: function() {
  
      var currentdate = new Date();
  
      function getTime() {
        // get local time based on the UTC offset
        this.hours = currentdate.getUTCHours() + parseInt(this.props.UTCOffset);    
  
        // correct for number over 24, and negatives
        if( this.hours &gt;= 24 ){ this.hours = this.hours - 24; }
        if( this.hours &lt; 0   ){ this.hours = this.hours + 12; }
  
        // add leading zero, first convert hours to string
        this.hours = this.hours + "";
        if( this.hours.length == 1 ){ this.hours = "0" + this.hours; }
  
        // minutes are the same on every time zone
        this.minutes = currentdate.getUTCMinutes();
  
        // add leading zero, first convert hours to string
        this.minutes = this.minutes + "";
        if( this.minutes.length == 1 ){ this.minutes = "0" + this.minutes; }
  
        this.seconds = currentdate.getUTCSeconds();
      }
  
      window.setInterval(function () {
        getTime();
      }, 1000);
  
      return(
        &lt;div className="city-row" ref="cityRow"&gt;
          &lt;span className="city-time"&gt;{this.hours}:{this.minutes}:{this.seconds}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  });
  </code></pre>