How can I fix the issue of the onClick function in my React list not activating the toggle?

Question

How can I fix the issue of the onClick function in my React list not activating the toggle?

How to Activate Toggle Functionality

Currently, I am working on a project using React where I developed a list with active states. I have implemented the onClick functions, but unfortunately, they are not working as intended. When I click on the list items, all I see is a quick flash of the background color that should indicate the active state of the div.

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;

For the CSS regarding the involved component, here is what I have implemented:

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

javascript css reactjs list react-native

Answer 1

Answer №1

An ":active" state/attribute is different from an "active" CSS class.

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

When an element is marked as "active", it should have both the "app_card_lists" and the "active" classes. The CSS styling should look something like this:

.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 { /* defines the active state CSS class */
  background-color: red;
}

If you want the "active" styling to apply only to specific elements, you can use a more targeted selector.

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

Answer 2

An ":active" state/attribute is different from an "active" CSS class.

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

When an element is marked as "active", it should have both the "app_card_lists" and the "active" classes. The CSS styling should look something like this:

.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 { /* defines the active state CSS class */
  background-color: red;
}

If you want the "active" styling to apply only to specific elements, you can use a more targeted selector.

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

Answer 3

Answer №2

Upon reviewing your code

app_card_lists active

it appears that you are expecting a class named active in your CSS file:

.active {
  background-color:  red;
}

Based on your code, you are checking for the absence of the :active state in a div element, which does not actually have this state.

For more information, please refer to mdn resources

Answer 4

Upon reviewing your code

app_card_lists active

it appears that you are expecting a class named active in your CSS file:

.active {
  background-color:  red;
}

Based on your code, you are checking for the absence of the :active state in a div element, which does not actually have this state.

For more information, please refer to mdn resources

Answer 5

Answer №3

Follow these steps to update your state:

const [selectedStars, setSelectedStars] = useState(1)

Now, implement your clickable star component like this:

<div 
    className={selectedStars <= 1 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(1)}
>
1
</div>
<div 
    className={selectedStars <= 2 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(2)}
>
2
</div>
<div 
    className={selectedStars <= 3 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(3)}
>
3
</div>
<div 
    className={selectedStars <= 4 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(4)}
>
4
</div>
<div 
    className={selectedStars <= 5 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(5)}
>
5
</div>

Answer 6

Follow these steps to update your state:

const [selectedStars, setSelectedStars] = useState(1)

Now, implement your clickable star component like this:

<div 
    className={selectedStars <= 1 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(1)}
>
1
</div>
<div 
    className={selectedStars <= 2 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(2)}
>
2
</div>
<div 
    className={selectedStars <= 3 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(3)}
>
3
</div>
<div 
    className={selectedStars <= 4 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(4)}
>
4
</div>
<div 
    className={selectedStars <= 5 ? 'star active' : 'star'} 
    onClick={() => setSelectedStars(5)}
>
5
</div>

How can I fix the issue of the onClick function in my React list not activating the toggle?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a local video file as a video background in HTML and CSS

Execute the JavaScript callback

Angular animation not firing on exit

What is the best approach to integrating payment solutions into a React Native application running on version 0

Utilizing a jQuery variable within an .html() method

Invoking servlet using Ajax

Develop a dynamic daily messaging system

Can Reactstrap integrate seamlessly with Bootstrap version 5?

Effortless rendering of React components using a CDN and Heroku for a seamless

Why is fading out columns in an HTML table with jQuery's .fadeTo() method taking so long?

React does not always remove event listeners when using the useEffect hook's return callback

Utilizing a RESTful approach for ajax requests is effective, but there seems to be a

The Gatsby Head API is experiencing issues with correctly formatting scripts

How can we capture and execute a function on the server in Next.js in response to a user's request for the index page (/)?

What is the best way to ensure that my button only reveals the corresponding div in its group upon clicking?

When encountering a TypeError where it is not possible to read the property 'data' of an undefined value, the result returned may be

The jQuery .load() function does not seem to be functioning properly on secure HTTPS connections

How can I intercept/manage the back button of the browser in React-router?

What setting should I adjust in order to modify the color in question?

Is there a way to specifically target the reCAPTCHA element in an iframe in order to display it without any other elements using Gatsby/React?