Show current time and live update in real time shown on the dom [React]

Question

I would like to display the time in my app. However I would like to update the time automatically without having the user to refresh the page.

What I would like is to display the time Example: 11:59 then 1 minute later displays 12:00 automatically without browser refresh. Just like a normal clock.

It would also be interesting to know how to show current seconds also.

Time should be the live current time in the users location.

Hope this is what you want https://stackoverflow.com/a/18229123/7785337 — Maniraj Murugan, May 08 '20 at 02:01
That looks like what I need thanks I will check that link. I want the client time. — DGB, May 08 '20 at 02:06

A.Khouilid · Answer 1 · 2020-05-08T02:20:57.897

1

function theTime() {
    let Datte = new Date();
    let H = Datte.getHours();
    let m = Datte.getMinutes();``
    let s = Datte.getSeconds();
    if (H < 10 ){
        H = "0" + H;
    }
    if (m < 10 ){
        m = "0" + m;
    }
    if (s < 10 ){
        s = "0" + s;
    }
    document.getElementById("time").textContent = `${H} : ${m} : ${s}`
}
 setInterval(theTime);

<div id="time"></div>

setInterval(theTime);

edited May 08 '20 at 02:20

answered May 08 '20 at 02:04

A.Khouilid

51
1
8

Add some explanation to what you did – Pritam Banerjee May 08 '20 at 02:06

Nidhin Joseph · Answer 2 · 2020-05-08T04:00:24.710

Here you go using the Date()

const timeEL = document.getElementById('time');

setInterval(setTime, 1000);

function setTime() {
  let date = new Date();
  timeEL.innerText = `${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
}

<div id="time">
</div>

Using ReactJS, you can use Refs and the DOM to call this function and set the value.

class Times extends React.Component {

  constructor(props) {
    super(props);
    this.timeElement = React.createRef();
  }

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


  setTime = () => {
    let date = new Date();
    this.timeElement.current.innerText = `${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
  }

  render = () => { 
    return (
      <div ref={this.timeElement}></div>
    )
  }

}

ReactDOM.render( <Times/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="app">
</div>

Unfortunately this is not working in React. Shame this code is the cleanest I have seen so far. — DGB, May 08 '20 at 02:26
I'm trying to work out how to convert this to use JSX rather than vanilla js and html — DGB, May 08 '20 at 03:29
@DGB I have updated the answer with react code, please check. — Nidhin Joseph, May 08 '20 at 04:01

Show current time and live update in real time shown on the dom [React]

2 Answers2