Render a React component every second

Question

So I'm following the React step-by-step documentation (specifically: https://reactjs.org/docs/rendering-elements.html) since the "make a game" tutorial didn't really work for me and I'm trying to recreate the clock updating every second micro-App. Only, I'm doing it locally so I decided to create a component containing the clock:

import React, {Component} from 'react'
class App extends Component {
    render () {
        return (
            <div className='container'>
                <h1>The time is</h1>
                <h2>It is {new Date().toLocaleTimeString()}</h2>
            </div>
        )
    }
}

export default App

which I imported into index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

setInterval(ReactDOM.render(<App />, document.getElementById('root')), 1000);

Now index.js should do this, at least as far as I understand it: set an interval of 1000 miliseconds so that every 1000 miliseconds the ReactDOM.render(component, location) function fires. Except .... it doesn't work. All I'm trying to do is something like this, but with components, instead of a classical function:

The time is:

insert local time

insert local time etc.

There is an example of exactly this on React's main page: https://reactjs.org/#a-stateful-component — Felix Kling, Jan 05 '21 at 08:25
Yeah well, I wanted to use stateless components for simplicity's sake ... — Liviu Ganea, Jan 05 '21 at 08:27
You can create a state That's getting Current time (new Date();) and the use useEffectHook to rerender every time that's its changing, — Ethanolle, Jan 05 '21 at 08:32
I feel using state to do this would actually more simplistic that trying to achieve it without using state. — Kyle Lambert, Jan 05 '21 at 09:22

Render a React component every second

0 Answers0