How do I make an li change colour when active?

Question

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?

CSS:

#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;
}

Titles:

import React from 'react';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className="faqnav" data-item="all" onClick={this.props.filter}>All</li>
                    <li className="faqnav" data-item="general" onClick={this.props.filter}>General</li>
                    <li className="faqnav" data-item="stats" onClick={this.props.filter}>Stats</li>
                    <li className="faqnav" data-item="account" onClick={this.props.filter}>Account</li>
                    <li className="faqnav" data-item="social" onClick={this.props.filter}>Social Media</li>
                </ul>
            </div>
        );
    }
}[![Screenshot][1]][1]

Answer 1

Try the following: import React from 'react';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    state = {
        activeFilter: 0,
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className={`faqnav ${this.state.activeFilter === 1 ? 'active': ''}`}  data-item="all" onClick={(e) => this.filter(e, 1)}>All</li>
                    <li className={`faqnav ${this.state.activeFilter === 2 ? 'active': ''}`}  data-item="general" onClick={(e) => this.filter(e, 2)}>General</li>
                    <li className={`faqnav ${this.state.activeFilter === 3 ? 'active': ''}`}  data-item="stats" onClick={(e) => this.filter(e, 3)}>Stats</li>
                    <li className={`faqnav ${this.state.activeFilter === 4 ? 'active': ''}`}  data-item="account" onClick={(e) => this.filter(e, 4)}>Account</li>
                    <li className={`faqnav ${this.state.activeFilter === 5 ? 'active': ''}`}  data-item="social" onClick={(e) => this.filter(e, 5)}>Social Media</li>
                </ul>
            </div>
        );
    }

    filter = (e, filterId) => {
        this.setState({
            activeFilter: filterId,
        });
        this.props.filter(e);
    }
}

CSS:

.faqnav.active {
    color: #000;
    text-decoration: underline;
}

Explanation: Add a local state, that saves the currently active filter. To each filter, assign some kind of ID, I suggest you to do that with constants. After that, every time a filter is clicked, save the clicked filter id in the state and execute your regular onClick handler. Then add a check in each <li> for the currently active filter and add an active class.

Hope that helps.