title: Changing/shuffling text every 1.5 second in a react component
body: <p>I am new to react and I wanted to do something a bit basic for my home screen of my application. </p>
  
  <p>I would like to change the last text every 1.5 seconds in a given paragraph with the given array. Later on I will add some animation but for right now I just wanted to do the basics. </p>
  
  <p>In my react component, I have something like this: </p>
  
  <pre><code>import React, { Component } from 'react';
  import './Home.css';
  
  class Home extends Component {
  
    render() {
      let textArray = ['eat', 'sleep', 'drink', 'snore', 'foo', 'buzz', 'whatever'];
      let textThatChanges;
  
      for (var i = 0; i &lt; textArray.length; i++) {
        textThatChanges = textArray[i];
      }
  
      return (
        &lt;section&gt;
          &lt;h1&gt;Hello, my name is Barry Allen&lt;/h1&gt;
          &lt;p&gt;I like to &lt;span&gt; {textThatChanges}&lt;/span&gt;&lt;/p&gt;
        &lt;/section&gt;
      );
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>In plain jquery it would look like something below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>textShuffle = function(element, text, timer){
    var thisEl = document.getElementById(element),
      counter = 0,
      t = setInterval(function(){  
          if(counter == text.length -1){
              t = window.clearInterval(t);
          }
          setTimeout(function(){
              //change markup to next the next string
              thisEl.innerHTML = text[counter];
              counter++;      
          },310);
      }, timer);
    }
    
    
    
  var shuffle1 = new textShuffle('foo', 
                                 ['eat', 'sleep', 'drink', 'snore', 'foo', 'buzz', 'whatever'],
                                 1500);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1&gt;
    I like to &lt;span id='foo'&gt;Play&lt;/span&gt;
  &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>