title: Simple time counter in react
body: <p>I'm starting to learn React and I want to create a component that compares the current time to starting time and update the view.</p>
  <p>Here's how I make it:</p>
  <pre><code>import React from 'react';
  
  const Timer = ({ callQueuedTime }) =&gt; (
  
      setInterval(function () { 
          console.log(&quot;test&quot;); 
          return &lt;p&gt;{new Date().getTime() - new Date(callQueuedTime).getTime()}&lt;/p&gt; 
      }, 1000)
  )
  
  export default Timer;
  </code></pre>
  <p>In devTools, the <code>console.log</code> is refreshing every 1 sec but not the HTML. Also, I'm always getting the same value, which is not the value of <code>new Date().getTime() - new Date(callQueuedTime).getTime()</code></p>
  <p>For information <code>callQueuedTime= 2020-04-23T22:02:07.382Z</code></p>
  <p><strong>UPDATE</strong></p>
  <p>I have updated my component code:</p>
  <pre><code>class Timer extends React.Component {
      constructor(props, context) {
          super(props, context)
          this.state = {
              timer: 0,
          }
  
      }
      componentDidMount() {
          console.log(this.props)
          setInterval(function () {
              const time = new Date().getTime() - new Date(this.props.callQueuedTime).getTime()
              this.setState({ time });
          }, 1000)
      }
      render() {
          return (
              &lt;p&gt;{this.state.timer}&lt;/p&gt;
          );
      }
  }
  </code></pre>
  <p>Now, after the first second, I get this error:</p>
  <blockquote>
  <p>Cannot read property 'callQueuedTime' of undefined</p>
  </blockquote>