React basic clock example using setInterval

To create a basic clock in React, we can use setInterval in componentDidMount and optionally clear it in componentWillUnmount if relevant. You may also want to read React – Component Specs and Lifecycle. Here is the code snippet:

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<div id="mycomp"></div>
<script type="text/babel">
var MyComp = React.createClass({
  getInitialState: function(){
    return {date:  (new Date()).toLocaleTimeString()};
  },
  componentDidMount: function() {
    this.timerId = setInterval(this.update_time, 1000);
  },
  update_time: function() {
    this.setState({date: (new Date()).toLocaleTimeString()});
  },
  render: function() {
    return (<div>{this.state.date}</div>);
  },
  componentWillUnmount: function() {
    clearInterval(this.timerId);
  },
});
ReactDOM.render(<MyComp/>, document.getElementById('mycomp') );
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments