title: React - dynamically and class name
body: <p><a href="https://stackblitz.com/edit/react-eutccs?file=index.js" rel="nofollow noreferrer">demo</a></p>
  
  <p>I'm adding text elements from and array and I like to loop through the elements and updated the claas name.</p>
  
  <p>I'm selecting the elements with their current class name and I want to add the new class name as well.</p>
  
  <p>Is it possible to add the new class name something like</p>
  
  <pre><code>element.className={'selected'} 
  </code></pre>
  
  <p>=</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; {
  
    const colors = [
      'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
    ]
  
    const loopFun = () =&gt; {
      for(let i=0; i&lt;colors.length; i++){
        const element = document.getElementsByClassName('test-'+i)
        //element.className={'selected'} 
      }
    }
  
    return (
      &lt;div className='titles'&gt;
        {colors.map((color, i) =&gt; (
          &lt;p key={i} className={'title-'+i}&gt;{color}&lt;/p&gt;
        ))}
  
        {loopFun()}
  
      &lt;/div&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));   
  </code></pre>