title: How to re-render a particular component in React with setInterval or there is another way?
body: <p>I have created the functional component in React for time counter. Everything working fine. But, component is not re-rendering after every second. I am new in React. </p>
  
  <p>So, how we can re-render the functional component with <code>setInterval()</code>? </p>
  
  <pre><code>import React from 'react'
  import withStyle from 'react-jss'
  
  
  const counterStyle = {
      counter:{
          color:'#FFFFFF'
      }
  }
  
  let date = new Date();    
  let todayDate = date.getDate();
  let hours = date.getHours()
  let minutes = date.getMinutes();
  let second = date.getUTCSeconds();    
  
  const timerDisplay = () =&gt; {
       date = new Date();    
       todayDate = date.getDate();
       hours = date.getHours()
       minutes = date.getMinutes();
       second = date.getUTCSeconds();    
  }
  
  const TimeCounter = ({classes}) =&gt; {
      setInterval(() =&gt; {
          timerDisplay()
      }, 1000);
      return(
          &lt;div className={classes.counter}&gt;
              &lt;h1&gt;{`${hours} : ${minutes} : ${second} : ${todayDate}`}&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  export default withStyle(counterStyle)(TimeCounter);
  </code></pre>