How do I properly get the date and time? - date

Question

I am new to react and trying to get the actual date and time but I can't figure out how to do so :(
Could someone help me please !
I try to get the date in the initial state and actualise it every second. When I run it, I get a white screen.
import React from 'react';
import './Menubar.css';
import Time from 'react-time';
const Menubar = React.createClass({
getInitialState() {
return {
now: new Date().now(),
};
},
getRealTime: function() {
this.setState(
{
now: new Date().now(),
})
},
/**
* Render the Menubar component
* #return {Component} the App Component rendered
*/
render() {
setInterval(this.getRealTime(), 1000);
return (
<div className="Menubar">
<ul className="Menubar-menu">
<div className="">
<li className="Menubar-name">login name</li>
<li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
<li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
</div>
</ul>
</div>
);
}
});
export default Menubar;

Answer 1

Two things:
new Date().now() is not a function, new Date() returns the current date and time, so no need to add it.
You try to set the state inside the render function (calling getRealTime every single render, which causes a re-render). As I understand, you want to update the time every second. You could set that up in componentDidMount.
Here's your Menubar component with those things fixed. I also clear the interval when the component unmounts:
const Menubar = React.createClass({
getInitialState() {
return {
now: new Date(),
};
this.interval = null;
},
componentDidMount: function() {
const self = this;
self.interval = setInterval(function() {
self.setState({
now: new Date(),
});
}, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render() {
return (
<div className="Menubar">
<ul className="Menubar-menu">
<div className="">
<li className="Menubar-name">login name</li>
<li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
<li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
</div>
</ul>
</div>
);
}
});

Answer 2

To just get the current date you can use
var dateVariable = new Date()
dateVariable.getDate()
OR if you want the current Date & Time in full form then,
var dateVariable = Date().toLocaleString()
You can find a comprehensive list of methods available on:
https://hdtuto.com/article/react-js-get-current-date-and-time-example
The above link saved a lot of my time. Hope it works. Happy hacking!

Answer 3

I just want to add to IronmanX46's answer, but it won't let me comment.
I wanted to point out that you can do the exact same thing as
var dateVariable = new Date()
dateVariable.getDate()
var dateVariable = Date().toLocaleString()
by simply doing
var dateVariable = Date()
As per the documentation:
Date()
When called as a function, returns a string representation of the
current date and time. All arguments are ignored. The result is the
same as executing new Date().toString().
There are lots of good websites out there that will give you examples of how to do things, but I find it saves time to just go read the documentation, which usually includes examples. I'll then go check out other examples if I can't understand the documentation.
Date Documentation Link