title: How do I use setInterval to dynamically change span.innerText
body: <p>I'm trying to dynamically re-render the span.innerText using the array , but for some reason the browser cannot read my state property, returning "cannot get property "text" of undefined".</p>
  
  <p>Do you have any idea how to make it work?</p>
  
  <pre><code>    class Reja_S2_Staff extends Component {
     constructor(props) {
      super(props);
      this.state = {
          text: ["Zabawy", "Radości", "Smutku"]
      }
  }
  
  componentDidMount() {
      this.changeSpan()
  }
  
  changeSpan =() =&gt; {
  
      let span = document.querySelector('#staff_span');
  
  
      for (let i = 0; i &lt;= 3 ; i++) {
          let interval = setInterval(function () {
  
              span.innerText = `${this.state.text[i]}`
  
          }, 2000);
      }
  
  };
  
  
     render() {
      return (
  
          &lt;div className='row' id='staff'&gt;
              &lt;div className='col-12'&gt;
  
   &lt;span id="staff_span" className="animate_span"&gt; Zabawy &lt;/span&gt;
  
              &lt;/div&gt;
  </code></pre>