React list onClick function isn't triggering active toggle, how to troubleshoot?

Making the active toggle on

I am currently working with React and I made a list where they will have active states and I already made the onClick functions but it won't work. If I try to click and expect the toggle all I get is just flash of the background color I expect the div to get when it's active.

import React, { useState } from 'react';
import './Home.css';

function Home() {
  const [isActive, setIsActive] = useState({
    oneStar: true,
    twoStars: false,
    threeStars: false,
    fourStars: false,
    fiveStars: false,
  });

  return (
    <div className='app_card_container'>
      <div className='app_card_body'>
        <div className='app_card_list'>
          <div
            className={isActive.oneStar
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: true,
                twoStars: false,
                threeStars: false,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            1
          </div>
          <div
            className={isActive.twoStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: true,
                threeStars: false,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            2
          </div>
          <div
            className={isActive.threeStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: true,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            3
          </div>
          <div
            className={isActive.fourStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: false,
                fourStars: true,
                fiveStars: false,
              })
            }
          >
            4
          </div>
          <div
            className={isActive.fiveStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: false,
                fourStars: false,
                fiveStars: true,
              })
            }
          >
            5
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

and here is my CSS for the div involved in the subject:

.app_card_list {
  display: flex;
  flex-direction: row;
}

.app_card_lists {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: hsl(216, 12%, 8%);
  text-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}

.app_card_lists:hover {
  background-color: hsl(217, 12%, 63%);
}

.app_card_lists:active {
  background-color: red;
}

An ":active" state/attribute is not the same thing as an "active" CSS classname.

className={isActive.oneStar ? 'app_card_lists active' : 'app_card_lists'}

When an item is "active" you are coding it to have both an "app_card_lists" and an "active" classname. The CSS rules should likely be something more like the following:

.app_card_lists {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: hsl(216, 12%, 8%);
  text-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}

.active { /* active CSS class */
  background-color: red;
}

If you want to limit the scope of the active CSS rule you can provide a more specific selector.

.app_card_lists.active { /* both app_card_lists and active CSS classes */
  background-color: red;
}

Actually in your code

app_card_lists active

implies that in your css file you should have a class called active as:

.active {
background-color:  red;
}

As you wrote in your code, you are checking if the element div hasn’t a :active state, which div element has’t.

Resources mdn resources

set your state like this:

const [activeStars, setActiveStars] = useState(1)

and your clickable Star like this:

<div 
className={activeStars <= 1 ? 'app_card_lists active' : 'app_card_lists'} 
onClick={() => setActiveStars(1)}
>
1
</div>
<div 
className={activeStars <= 2 ? 'app_card_lists active' : 'app_card_lists'} 
onClick={() => setActiveStars(2)}
>
2
</div>
<div 
className={activeStars <= 3 ? 'app_card_lists active' : 'app_card_lists'} 
onClick={() => setActiveStars(3)}
>
3
</div>
<div 
className={activeStars <= 4 ? 'app_card_lists active' : 'app_card_lists'} 
onClick={() => setActiveStars(4)}
>
4
</div>
<div 
className={activeStars <= 5 ? 'app_card_lists active' : 'app_card_lists'} 
onClick={() => setActiveStars(5)}
>
5
</div>