import React, { Component } from 'react';

import UserInput from '../common/UserInput';

export default class App extends Component {
  constructor() {
  	super();

  	this.state = { 
      count: 0,
      date: new Date() 
    };

    this.tick = this.tick.bind(this);
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  onClickAddOne() {
  	console.log("clicked");
  	const new_count = this.state.count + 1;
  	this.setState({ count: new_count });
  }

  render() {
    return (
      <div style={{marginLeft: '20px'}}>
      	<h1 style={{marginTop: '30px'}}>My awesome app</h1>

      	<button onClick={this.onClickAddOne.bind(this)} style={{marginBottom: '10px'}}>Add One</button>


        <UserInput placeholder="Input Box 1" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value})} style={{display: 'block'}} />


        <h1 style={{marginTop: '200px'}}>What's in the state?</h1>
        <h2>Current Count: <span style={{color: 'red'}}>{this.state.count}</span></h2>
        <h2>Input Box 1: <span style={{color: 'red'}}>{this.state.value}</span></h2>
        <h2>The time: <span style={{color: 'red'}}>{this.state.date.toLocaleTimeString()}</span></h2>


      </div>
    );
  }
}

import React, { Component } from 'react';

import UserInput from '../common/UserInput';

export default class App extends Component {
  constructor() {
  	super();

  	this.state = { count: 0 };
  }

  onClickAddOne() {
  	console.log("clicked");
  	const new_count = this.state.count + 1;
  	this.setState({ count: new_count });
  }

  render() {
    return (
      <div style={{marginLeft: '20px'}}>
      	<h1 style={{marginTop: '30px'}}>My awesome app</h1>

      	<button onClick={this.onClickAddOne.bind(this)} style={{marginBottom: '10px'}}>Add One</button>


        <UserInput placeholder="Input Box 1" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value})} style={{display: 'block'}} />


        <h1 style={{marginTop: '200px'}}>What's in the state?</h1>
        <h2>Current Count: <span style={{color: 'red'}}>{this.state.count}</span></h2>
        <h2>Input Box 1: <span style={{color: 'red'}}>{this.state.value}</span></h2>



      </div>
    );
  }
}

--- 
+++ 
@@ -6,7 +6,29 @@
   constructor() {
   	super();
 
-  	this.state = { count: 0 };
+  	this.state = { 
+      count: 0,
+      date: new Date() 
+    };
+
+    this.tick = this.tick.bind(this);
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(),
+      1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  tick() {
+    this.setState({
+      date: new Date()
+    });
   }
 
   onClickAddOne() {
@@ -29,7 +51,7 @@
         <h1 style={{marginTop: '200px'}}>What's in the state?</h1>
         <h2>Current Count: <span style={{color: 'red'}}>{this.state.count}</span></h2>
         <h2>Input Box 1: <span style={{color: 'red'}}>{this.state.value}</span></h2>
-
+        <h2>The time: <span style={{color: 'red'}}>{this.state.date.toLocaleTimeString()}</span></h2>
 
 
       </div>
Add lifecycle methods for updating/rendering date state variable
