Hello, how can I display a real time clock in React?

Question

I followed a certain Youtube tutorial on this subject, and I came up with this code. The time, which is based off the state (dateClass), and the this.time variable. The time displays in the proper area just fine. This test code shows "PM" twice since I wanted to see if the seconds were updating. As you'll see, they're not. I tried to write setTime with the equals sign or with just a parentheses. Either way, the time isn't updating. Pretty weird, since I copied and pasted what the other person did.

constructor(props) {
 super(props);

  this.state = {dateClass: new Date()}
  this.time = this.state.dateClass.toLocaleTimeString();

      this.hourMin = this.time.length == 10?
      this.time.slice(0):this.time.slice(0,5);

      this.diem = this.time.length == 10?
      this.time.slice(7):this.time.slice(8);    
   }

   setTime = () => {
      this.setState({
         dateClass: new Date()
      })
   }

   componentWillMount() {
      setInterval(() => this.setTime, 1000)
    }

Here's the render.

render() {
  return(
     <div className="base-content">
        <div className="close-button" onClick={this.props.close}></div>
        <div className="text">
           <p>The game's phone can bring out some game changing features, even though actually using the phone can get you killed. This is because the Phone's features might take too long to access. In the meantime, other players are taking aim at you. Some of the issues with the phone include too many
           submenu items (Contacts), the fact that it can (and will) interrupt what you're doing, and "pre-scripted load times" as the phone calls someone.
           As you click back and forth from the apps to the phone's Home button, you'll see that I propose very straightforward options to enhance & simplify the game's
           phone.
           <br />
           <br />
           For example, if you need to find a set of players to play with, you can deal with the randomness of online matchmaking where players often have
           all types of motives. You can also be more specific with the exact challenge and money details, but you have to go on reddit or another site to do that.
           Considering that the game is already online, why isn't there a Find a Crew app that allows you to find people within specific contexts.
           <br />
           <em>(P.S. The home button on the phone is clickable)</em>
           </p>
        </div>

        <section className="screen">
           <img src={phone} alt="" className="phone-svg"/>
           <img src={loading} alt="" className="app" />
           <div className="row0">
              <img src={batt} alt="" className="icon1" />
              <img src={wifi} alt="" className="icon2" />
              <p className="clock">{
                 this.hourMin + this.diem
              }</p>
              <p className="day">Mon</p>
           </div>

           <div className="row1">
              <img src={job} alt="" id="job" />
              <img src={find} alt="" id="find" />
              <img src={www} alt="" id="www" />
           </div>
           <div className="row2">
              <img src={serv} alt="" id="serv" />
              <img src={biker} alt="" id="bikers" />
              <img src={merry} alt="" id="merry" />
           </div>
           <div className="row3">
              <img src={peg} alt="" id="peg" />
              <img src={lamar} alt="" id="lamar" />
              <img src={lester} alt="" id="lester" />
           </div>
           <span id="close"></span>
        </section>
     </div>
  )

}

Answer 1

() => this.setTime does not execute this.setTime. Simpler example:

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo;
}

bar();

To execute a function you have to put () after it.

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo();
}

bar();

Either use

setInterval(() => this.setTime(), 1000)

or simpler:

setInterval(this.setTime, 1000)

Also keep in mind that the constructor is only executed once. You probably want to extract the various time parts in the render method instead.