title: Setting Interval speed using setState in React.js
body: <p>My project is to make typing animation effect and on the end of the word which is typed I need to slow down the speed of the blinker. </p>
  
  <p>I'm trying to set Interval speed with a setState functionality. The only problem is that I cannot setState from within render method but exactly there I have an access to my counter. And I guess I need to use my counter state in order to know when I need to slow the blinker down. I hope my description makes some sense :-)</p>
  
  <p>Thank you for any help :)</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class TypeAnimation extends Component {
      constructor(props) {
          super(props);
          this.state = {
              sec: 0,
              blinker: '',
              blinkerSpeed: 100
          };
      }
  
      componentDidMount() {
          this.textInterval = setInterval(() =&gt; {
              this.setState({
                  sec: this.state.sec + 1
              });
          }, 200);
  
          this.blinkerInterval = setInterval(() =&gt; {
  
              if (this.state.blinker === '') {
                  this.setState({
                      blinker: &lt;span style={{ color: 'orange', lineHeight: '2rem' }}&gt; | &lt;/span&gt;
                  });
              } else {
                  this.setState({
                      blinker: ''
                  });
              }
          }, this.state.blinkerSpeed); //here I would like to change the speed of the blinker with a state
      }
      render() {
          const inText = this.props.text[0];
          if (this.state.sec === this.props.text[0].length) {
              clearInterval(this.textInterval);
          }
  
          const firstLine = inText.substr(0, this.state.sec);
  
          return (
              &lt;div style={{ diplay: 'flex', justifyContent: 'center', marginTop: 30 }}&gt;
                  &lt;h1&gt;
                      {firstLine}
                      {this.state.blinker}
                  &lt;/h1&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default TypeAnimation;
  </code></pre>