How to show a count down/up in react - reactjs

Question

This is my code at the moment and I am trying to use react as a counter.
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
countstart : 1 ,
countend : 20,
};
}
counter = () => {
if(this.state.countstart < this.state.countend) {
this.setState({countstart : this.state.countstart + 1})
}
}
componentDidUpdate() {
setTimeout(()=>
{
this.counter()
}
, 1000)
}
render() {
this.counter()
return (
<div>
<Hello name={this.state.name} />
<p>
{this.state.countstart}
</p>
</div>
);
}
}
I want the number to count from 1 to 20 with the specified timeout milliseconds, so that it goes from 1 then 2 and so on, how am I able to achieve that by using the above code ?

Answer 1

First of all, instead of setTimeout, you need to use setInterval to run a method at a specified interval.
2ndly, you need to store the intervalID and make sure to stop it before the component unmounts in componentWillUnmount.
class App extends Component {
intervalID = 0;
componentDidUpdate() {
this.intervalID = setInterval(()=>
{
this.counter()
}
, 1000)
}
componentWillUnmount() {
clearInterval(this.intervalID);
}
// rest of code redacted... for brevity
}
Here is a shameless plug on how to cancel the setInterval.

Answer 2

You need to use setInterval instead of setTimeout. Also, you can just kick off the counter in componentDidMount.
class App extends React.Component {
constructor() {
super();
this.state = {
name: 'React',
countstart : 1 ,
countend : 20,
};
this.counter = this.counter.bind(this);
this.count = this.count.bind(this);
}
componentDidMount() {
this.count();
}
counter = () => {
if(this.state.countstart < this.state.countend) {
this.setState({countstart : this.state.countstart + 1})
}
}
count() {
setInterval(()=>
{
this.counter()
}
, 1000)
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>
{this.state.countstart}
</p>
</div>
);
}
}