title: TypeError: Cannot read property '49' of undefined; for MachineTyping effect component in React
body: <p>I have problem with this component. I've tried to convert it from Vanilla JavaScript one, which works perfectly. But that one not so much. I know there is something wrong with my usage of setState() method so many times, but I can't figure it out, what exactly. Can someone help me to make it to fully work?</p>
  
  <pre><code>
  class AnimationTypingText extends Component {
      state = {
          text: '',
          indexText: 0,
          activeLetter: 0,
          activeText: 0,
      }
  
      idInterval = setInterval(() =&gt; this.addLetter(), 50);
  
      addLetter = () =&gt; {
  
          const txt = [
              'HTML Lorem ipsum dolor sit amet consectetur',
              'CSS adipisicing elit. Repellat, laudantium dolorum',
              'JavaScript consequuntur dicta esse soluta aut assumenda', 
              'React error iusto qui atque necessitatibus ', 
              'Node tempore dolor laborum.', 
              'MongoDB Aspernatur quam voluptatum quis possimus.'];     
  
          if ( this.state.activeLetter &gt;= 0 ) {
              this.setState({
                  text: this.state.text + txt[this.state.activeText][this.state.activeLetter],
              });
          }
          this.setState({
              activeLetter: this.state.activeLetter + 1,
          });
              console.log('check 1')
          if ( this.state.activeLetter === txt[this.state.activeText].length ) {
  
              console.log('check 2')
              this.setState({
                  activeText: this.state.activeText + 1,
              })
              if ( this.state.activeText === txt.length ) return; 
  
  
                  return setTimeout(() =&gt; {
                      this.setState({
                          activeLetter: 0,
                          text: '',
                      })
                  }, 2000)
          }
          setTimeout(this.idInterval, 100);
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;div onLoad={this.idInterval}&gt;
                      &lt;p&gt;{this.state.text}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  // const indexTyping = setInterval(addLetter, 50);
  
  export default AnimationTypingText;
  </code></pre>
  
  <pre><code>1 of 4030 errors on the page
  TypeError: Cannot read property '49' of undefined
  AnimationTypingText.addLetter
  src/components/AnimationTypingText.js:25
    22 | 
    23 | if ( this.state.activeLetter &gt;= 0 ) {
    24 |     this.setState({
  &gt; 25 |         text: this.state.text + txt[this.state.activeText][this.state.activeLetter],
       | ^  26 |     });
    27 | }
    28 | this.setState({
  View compiled
  (anonymous function)
  src/components/AnimationTypingText.js:3
    1 | import React, { Component } from 'react';
    2 | 
  &gt; 3 | class AnimationTypingText extends Component {
    4 |     state = {
    5 |         text: '',
    6 |         indexText: 0,```
  </code></pre>