Question

45

React JS - Live clock update

rated 0 times [ 47] [ 2] / answers: 1 / hits: 29704 / 9 Years ago, thu, october 1, 2015, 12:00:00

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.

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?

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 >= 24 ){ this.hours = this.hours - 24; }

      if( this.hours < 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(

      <div className=city-row ref=cityRow>

        <span className=city-time>{this.hours}:{this.minutes}:{this.seconds}</span>

        </div>

      </div>

    )

  }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

jaelynncherokeeg questions

1 NextJS load external image Amazon

Thu, May 27, 21, 00:00, 3 Years ago

1 Create an Array of Favorite fruits Object

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React Testing Library - Avoid getBy?

Thu, Nov 14, 19, 00:00, 5 Years ago

1 How do I POST data to a .NET Core Web API using the fetch() javascript method

Thu, Sep 26, 19, 00:00, 5 Years ago

1 Yarn Link All Packages/Workspaces

Wed, Sep 18, 19, 00:00, 5 Years ago

View All

answered 9 Years ago gordonrockym · Accepted Answer

There seems to be a couple problems with your code. First is the closing div in the render function which causes your element to not even render.

Next you might want to take a look at state/props and React general lifecycle methods to get a better idea of program flow. The setInterval should be put in componentDidMount so its not called every time your component renders and creates a lot of timers. It also might help to put hours, minutes, and seconds as state so that way when these change your component re-renders automatically.

I modified your code below and put an example on jsfiddle. It does not print the seconds properly (just like in your getTime method) but hopefully it will give you a better idea of how logic should flow.

https://jsfiddle.net/rpg6t4uc/

var CityRow = React.createClass({

  setTime: function(){



    var currentdate = new Date();

    var hours = currentdate.getUTCHours() + parseInt(this.props.UTCOffset);    



      // correct for number over 24, and negatives

      if( hours >= 24 ){ hours -= 24; }

      if( hours < 0   ){ hours += 12; }



      // add leading zero, first convert hours to string

      hours = hours + ;

      if( hours.length == 1 ){ hours = 0 + hours; }



      // minutes are the same on every time zone

      var minutes = currentdate.getUTCMinutes();



      // add leading zero, first convert hours to string

      minutes = minutes + ;

      if( minutes.length == 1 ){ minutes = 0 + minutes; }



      seconds = currentdate.getUTCSeconds();

      console.log(hours, minutes, seconds)

      this.setState({

        hours: hours,

        minutes: minutes,

        seconds: seconds

      });

  },

  componentWillMount: function(){

    this.setTime();

  },

  componentDidMount: function(){

     window.setInterval(function () {

      this.setTime();

    }.bind(this), 1000);

  },

  render: function() {



    return(

      <div className=city-row ref=cityRow>

        <span className=city-time>{this.state.hours}:{this.state.minutes}:{this.state.seconds}</span>

      </div>

    )

  }

});