Clash Royale CLAN TAG#URR8PPP

update component every second react

I have been playing around with React and have the following time component that just renders Date.now() to the screen:

Date.now()

import React, Component from 'react';

class TimeComponent extends Component
constructor(props)
super(props);

this.state = time: Date.now() ;

render()
return(
<div> this.state.time </div>
);

componentDidMount()
console.log("TimeComponent Mounted...")



export default TimeComponent;


What would be the best way to get this component to update every second to re-draw the time from a React perspective?

4 Answers
4

You need to use setInterval to trigger the change, but you also need to clear the timer when the component unmounts to prevent it leaving errors and leaking memory:

setInterval

componentDidMount()
this.interval = setInterval(() => this.setState( time: Date.now() ), 1000);

componentWillUnmount()
clearInterval(this.interval);



This is an example from React.js website :

class Timer extends React.Component
constructor(props)
super(props);
this.state = seconds: 0 ;


tick()
this.setState(prevState => (
seconds: prevState.seconds + 1
));


componentDidMount()
this.interval = setInterval(() => this.tick(), 1000);


componentWillUnmount()
clearInterval(this.interval);


render()
return (
<div>
Seconds: this.state.seconds
</div>
);



ReactDOM.render(<Timer />, mountNode);


updater

In the component's componentDidMount lifecycle method, you can set an interval to call a function which updates the state.

componentDidMount

componentDidMount()
setInterval(() => this.setState( time: Date.now()), 1000)



class ShowDateTime extends React.Component
constructor()
super();
this.state =
curTime : null


componentDidMount()
setInterval( () =>
this.setState(
curTime : new Date().toLocaleString()
)
,1000)

render()
return(
<div>
<h2>this.state.curTime</h2>
</div>
);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.