title: setInterval to change class name on elements
body: <p>I have a <a href="https://stackblitz.com/edit/react-ux1jy9?file=index.js" rel="nofollow noreferrer">demo</a>.</p>
  
  <p>I have a group of text elements that I would like to fade in and out, I want to fade in the first element then fade it out and and fade in the second element to create a sort of carousel.</p>
  
  <p>I have css @keyframes that will do the fading.</p>
  
  <p>I was hoping to add and remove a class to each text element to use the fade animation.</p>
  
  <p>So I wanted to use setInterval or something similar and select the element add the class then remove it.</p>
  
  <p>How can I select the element using a class and how can I do this in the setInterval</p>
  
  <pre><code>import React, { Component, useState, useEffect } from 'react';
  import { render } from 'react-dom';
  import Hello from './Hello';
  import './style.css';
  
  const App = () =&gt; {
  
    useEffect(() =&gt; {
    const interval = setInterval(() =&gt; {
  
    }, 1000);
      return () =&gt; clearInterval(interval);
    }, []);
  
    const colors = [
      'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
    ]
  
    return (
      &lt;div className='titles'&gt;
        {colors.map((color, i) =&gt; (
          &lt;p className={'title-'+i}&gt;{color}&lt;/p&gt;
        ))}
      &lt;/div&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>