A Timer with React
Make a simple countdown timer with React.js.
I made a population simulation based on Conway’s Game of Life using React. The simulation updates the state of the population with each tick. This is the skeleton code for a timer which can be used to make projects that update at a timed interval. I wanted to show the code for the timer separately so it would be easier to read.
Timer with React.js
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {count: 10};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
doSomething() {
if (this.state.count == 0) {
clearInterval(this.timerID);
}
}
tick() {
this.setState({
count: this.state.count - 1
});
this.doSomething();
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('app')
);
This example displays a timer that counts down from ten and stops at zero. The doSomething function fires at each interval. I’ll be using this function to update the population state later.