REact State clock

react set state

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="content">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Clock extends React.Component {
	constructor(props) {
  	super(props)
    this.launchClock()
    this.state = {currentTime: (new Date()).toLocaleString()}
  }
  launchClock() {
  	setInterval(() => {
     console.log('Updating time...')
     this.setState({
     	currrentTime: (new Date()).toLocaleString() });
    }.bind(this), 1000);
  }
  render() {
  	console.log('Rendering Clock...')
    return <div>Yo bitches it's {this.state.currentTime}</div>;
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('content')
);