React does not display time only {"${new Date().getHours()}:${new Date().getMinutes()}"}-CodePudding

I am learning React from a Udemy course and got stuck with this code. The exact same code seems to work on the video but does not display the time on my webpage only the actual code {"${new Date().getHours()}:${new Date().getMinutes()}"}. Please advise how I can get it to display the time.

My code:

 <div className={classes.FeatureData}>

       <p>{"${new Date().getHours()}:${new Date().getMinutes()}"} </p>

   </div>

CodePudding user response：

The problem is the " when you should use backstick:

Change (") by (`)

It must be like this:

{`${new Date().getHours()}:${new Date().getMinutes()}`}

CodePudding user response：

You need to use template strings:

<div>
  <p>{`${new Date().getHours()}:${new Date().getMinutes()}`}</p>
</div>

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals