title: How to show a count down/up in react
body: <p>This is my code at the moment and I am trying to use react as a counter.</p>
  
  <pre class="lang-js prettyprint-override"><code>class App extends Component {
    constructor() {
      super();
      this.state = {
        name: 'React',
        countstart : 1 ,
        countend : 20,
      };
    }
  
    counter = () =&gt; {
      if(this.state.countstart &lt; this.state.countend) {
        this.setState({countstart : this.state.countstart + 1})
      }
    }
  
  
  componentDidUpdate() {
    setTimeout(()=&gt;
    {
    this.counter()
    }
     , 1000)
  }
  
    render() {
      this.counter()
      return (
        &lt;div&gt;
          &lt;Hello name={this.state.name} /&gt;
          &lt;p&gt;
            {this.state.countstart}
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>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 ? </p>