Question 179341 in CSS Question posted in
Some basic documentation can be found here.

Why isn’t the onClick function in CSS-React list triggering an active toggle?

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;
}
Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search