Add classNames to React component based on hover or click event

Question

How do I add a className to a div, based on either event.

Here's my code below.

I've tried:

className={isActive ? "active" : "", isClicked ? "clicked" : ""}

but this only works if the event is clicked.

this works when the event is hovered

className={isActive ? "active" : ""}

so does this when it's clicked

className={isClicked ? "clicked" : ""}

Just not together.

What am I doing wrong?

Here's my full code:

const [isActive, setIsActive] = useState(false);
const [isClicked, setIsClicked] = useState(false);

<MenuButton
  onMouseEnter={() => setIsActive(!isActive)}
  onMouseLeave={() => setIsActive(!isActive)}
  onClick={() => setIsClicked(!isClicked)}
  className={`${isActive ? "active" : ""} ${isClicked ? "clicked" : ""}`}
>

const MenuButton = styled.div`
  background: #3498db;
  &.clicked {
    display: none;
  }
  &.active {
    transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  }
`;

UPDATE: I have now included my events, states and how I am using them in my css

Where are your event handlers? Can you share them?

Ergis
– Ergis

2021-03-02 13:52:18 +00:00
Commented Mar 2, 2021 at 13:52 — Ergis
– Ergis, Commented Mar 2, 2021 at 13:52
Sure, I'll update my question.

Juan-man
– Juan-man

2021-03-02 15:28:52 +00:00
Commented Mar 2, 2021 at 15:28 — Juan-man
– Juan-man, Commented Mar 2, 2021 at 15:28

Alexey Kostyuhin · Accepted Answer · 2021-03-02 13:59:44Z

1

ok, Please use component classnames (https://www.npmjs.com/package/classnames)

example 1:

<Button 
  className={classNames(styles.button, 'button-secondary')} 
  onClick={handleReturn}
>
  back
</Button>

example 2:

        <div 
            className={classnames(
                styles.ShadowIconButtonWrapper,
                {
                    [styles.ShadowIconButtonWrapperOpen]: open,
                    [styles.ShadowIconButtonWrapperClose]: !open
                }
            )}
        >
            <ShadowIconButton 
                renderIcon={renderIcon}
                elevation={elevation}
                onClick={handleDrawerButtonClick}
            />
        </div>

decision:

className={classnames(
                    {
                        ['active']: isActive,
                        ['clicked']: isClicked 
                    }
)}

answered Mar 2, 2021 at 13:59

Alexey Kostyuhin

4143 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan-man Over a year ago

Not sure I want to add extra packages just for something so simple.

nucab · Accepted Answer · 2021-03-02 16:28:09Z

0

You can use string literals.

className={`${isActive ? "active" : ""} ${isClicked ? "clicked" : ""}`}

or separate the logic:

const isActiveClass = isActive ? 'active' : '';
const isClickedClass = isClicked ? 'clicked' : '';

className={`${isActiveClass} ${isClickedClass}`}

or you can use a library to achieve a similar effect.

https://www.npmjs.com/package/clsx

edited Mar 2, 2021 at 16:28

answered Mar 2, 2021 at 13:56

nucab

7816 silver badges12 bronze badges

2 Comments

Juan-man Over a year ago

This example does work but when using prettier in vs code, the format is ugly.

nucab Over a year ago

You can extract the expression to variable. For example, const isActiveClass = isActive ? 'active' : ''; const isClickedClass = isClicked ? 'clicked' : ''; className={${isActiveClass} ${isClickedClass}}

Collectives™ on Stack Overflow

Add classNames to React component based on hover or click event

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related