title: How do I change the css of classes through react dynamically
body: <p>My question is regarding changing the CSS of classes through another class. I'm aware that I can only change the CSS if the element we're trying to change is adjacent or a sibling of the selected element. </p>
  
  <p>My goal is to change the background color of the header and tabs class when the Link 'Bloody Mary' is selected but I don't know how to accomplish this. 
  I am using React and the way I thought about it was using states. The default would be white and when the Bloody Mary link is active, it would change the state from white to black. I also plan on changing other styles like the font color but the main idea remains the same, changing the styling dynamically through react.</p>
  
  <p>I have stripped my code to the basics so it looks cleaner. If you can offer some help it would be appreciated. </p>
  
  <pre><code>  class Header extends React.Component {
      render () {
          return(
            &lt;div&gt;
              &lt;div className='header'&gt;         
                &lt;li className='tabs'&gt;&lt;NavLink className='style' 
                activeClassName='selected'&gt;Home&lt;/NavLink&gt;&lt;/li&gt;
  
                &lt;li className='tabs'&gt;&lt;NavLink className='style' 
                activeClassName='selected'&gt;Team&lt;/NavLink&gt;&lt;/li&gt;
  
                &lt;div className='dropdown'&gt;
                  &lt;div className='tabs'&gt;&lt;NavLink className='style projectstab' 
                  activeClassName='selected'&gt;Projects&lt;/NavLink&gt;&lt;/div&gt;
                  &lt;div className='dropdown-content'&gt;
                    &lt;a&gt;
                      &lt;p className='dropdown-li'&gt;
                      &lt;/p&gt;
                      &lt;NavLink activeClassName='bloodyselected'&gt;
                        Bloody Mary
                      &lt;/NavLink&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;li className='tabs'&gt;&lt;NavLink className='style' 
                activeClassName='selected'&gt;Contact Us&lt;/NavLink&gt;&lt;/li&gt;
              &lt;/div&gt;
        )
      }
    }
  </code></pre>