title: displaying the getHours() and getMinutes() in double digits using ReactJS
body: <p>I have a live clock working pretty good except in the morning hours, it displays <code>1:2:3</code> when it should display <code>01:02:03</code></p>
  
  <p>How can I modify this to work in a ReactJS component? I'm very new at React and the ways to implement a javascript function are not quite the same so I can't really use any of the regular JS answer I find. Here is the code in my class:</p>
  
  <pre><code>class SidebarContent extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              date: new Date()
          };
      }
  
      componentWillUnmount() {
          clearInterval(this.timerID);
      }
  
      tick() {
          this.setState({date: new Date()});
      }
  
      getHours() {
          return this.state.date.getHours();
      }
      getMinutes() {
          return this.state.date.getMinutes();
      }
  
      getSeconds() {
          return this.state.date.getSeconds();
      }
  
  
      componentDidMount() {
  
         this.timerID = setInterval(() =&gt; this.tick(), 1000);
      }
  
      render() {
  
      return (
          &lt;ul className="nav" ref={(c) =&gt; {this.nav = c; }}&gt;
              &lt;li className="today"&gt;
                  &lt;Row className="clock" center="xs"&gt;
                      &lt;Row center="xs"&gt;
                          &lt;span className="hours"&gt;{this.getHours()}&lt;/span&gt;
                          &lt;span&gt;:&lt;/span&gt;
                          &lt;span className="min"&gt;{this.getMinutes()}&lt;/span&gt;
  
                          &lt;span className="sec"&gt;{this.getSeconds()}&lt;/span&gt;
                      &lt;/Row&gt;
                  &lt;/Row&gt;
                  &lt;Row className="date" center="xs"&gt;
                      &lt;p className="today-is"&gt;{this.state.date.toDateString()}&lt;/p&gt;
                  &lt;/Row&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        );
     }
  }
  </code></pre>
  
  <p>Thanks in advance</p>