title: How do I make an li change colour when active?
body: <p>I am creating an FAQ section on my website where you should be able to filter questions by clicking on one of the section topics. I have this functioning however what I want is for when one of the section titles is selected, that specific title should change from being red to black and underlined. When the mouse is being held down it works but as soon as I let go it changes back. How do I get this to remain in this state when that certain section is active?</p>
  
  <p>CSS:</p>
  
  <pre><code>#portfolio .portfolio-list .nav li {
   margin: 0 40px 0 0;
   float: left;
   color: #C42B32;
   line-height: 16px;
   cursor: pointer;
   font-size: 20px;
   font-weight: 600 ! important;
   font-family: 'Assistant', sans-serif ! important;
   letter-spacing: 0.02em;
   -moz-transition: all 0.5s ease-in-out 0s;
   -ms-transition: all 0.5s ease-in-out 0s;
   -o-transition: all 0.5s ease-in-out 0s;
   -webkit-transition: all 0.5s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0s;
   text-transform: uppercase;
  }
  
  #portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active {
   color: #000000;
   -moz-transition: all 0.5s ease-in-out 0s;
   -ms-transition: all 0.5s ease-in-out 0s;
   -o-transition: all 0.5s ease-in-out 0s;
   -webkit-transition: all 0.5s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0s; }
  
  #portfolio .portfolio-list .nav li:active, li:focus, li:focus-within {
  color: #000000 ! important;
  text-decoration: underline;
  }
  </code></pre>
  
  <p>Titles:</p>
  
  <pre><code>import React from 'react';
  
  export default class Filters extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div className="portfolio-list"&gt;
                  &lt;ul className="nav list-unstyled" id="portfolio-flters"&gt;
                      &lt;li className="faqnav" data-item="all" onClick={this.props.filter}&gt;All&lt;/li&gt;
                      &lt;li className="faqnav" data-item="general" onClick={this.props.filter}&gt;General&lt;/li&gt;
                      &lt;li className="faqnav" data-item="stats" onClick={this.props.filter}&gt;Stats&lt;/li&gt;
                      &lt;li className="faqnav" data-item="account" onClick={this.props.filter}&gt;Account&lt;/li&gt;
                      &lt;li className="faqnav" data-item="social" onClick={this.props.filter}&gt;Social Media&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  }[![Screenshot][1]][1]
  </code></pre>