React JS toggle/ adding a class on hover

Question

I'm using the animate.css library with React and trying to set up a element (button) to pulse when hovered over. Tried to look through the docs and here but can't find a way to achieve this simple task. If anyone has achieved this or found a reference would greatly be appreciated.

class App extends Component {

   constructor(props) {
    super(props);

    this.handleHover = this.handleHover.bind(this);
  }

  handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
  }

  render() {
    const btnClass = this.state.isHovered ? "pulse animated" : "";

    return (
      <div>
        <button className={btnClass} onMouseEnter={this.state.handleHover} onMouseLeave={this.state.handleHover}>Test</button>
      </div>
    );
  }
}

export default App;

Chase DeAnda · Accepted Answer · 2019-07-15 20:59:22Z

62

You can use the onMouseEnter and onMouseLeave events on the component and toggle the class accordingly.

constructor(){
    super();
    this.state = {
        isHovered: false
    };
    this.handleHover = this.handleHover.bind(this);
}
handleHover(){
    this.setState(prevState => ({
        isHovered: !prevState.isHovered
    }));
}
render(){
    const btnClass = this.state.isHovered ? "pulse animated" : "";
    return <button className={btnClass} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></button>
}

Update 05/07/19: Hooks

import React, { useState } from 'react';

export default function Component () {
  const [hovered, setHovered] = useState(false);
  const toggleHover = () => setHovered(!hovered);
  return (
    <button 
      className={hovered ? 'pulse animated' : ''}
      onMouseEnter={toggleHover}
      onMouseLeave={toggleHover}
    >
    </button>
  )
}

edited Jul 15, 2019 at 20:59

answered Jun 15, 2017 at 21:12

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

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

14 Comments

Fernando B Over a year ago

i got an error message when i hovered over TypeError: Cannot read property 'setState' of null Specifically this line > 34 | this.setState({

Chase DeAnda Over a year ago

Yeah, you'll need to bind that function to your component, check out the docs for more info. But basically you can either do this.handleHover = this.handleHover.bind(this) in the constructor, or change the props to onMouseEnter={this.handleHover.bind(this)} and onMouseLeave={this.handleHover.bind(this)}.

Chase DeAnda Over a year ago

I made an assumption on your project since you didn't post any example code. If you post the entire component it would be easier to help.

Fernando B Over a year ago

sorry about that, i had added a state to my constructor but still doesn't seem to fix it, i added the code to my original question.

Chase DeAnda Over a year ago

@tonejac It is passed in as an argument when providing a function as the first argument to this.setState: reactjs.org/docs/react-component.html#setstate

|

ice1080 · Accepted Answer · 2020-10-08 23:09:09Z

4

What about using the css :hover property? This worked way better for me by changing my hover class section in the css file to use :hover instead of react.

I tried using the above suggestions but react didn't seem fast enough to get it so the state would become wrong if the mouse moved slowly over the button.

answered Oct 8, 2020 at 23:09

ice1080

3343 silver badges11 bronze badges

2 Comments

canbax Over a year ago

I think this answer is simpler and efficient

Fernando B Over a year ago

The reason is I needed to modify the component ClassList or any property and simply put, css is limited in that. I could have gone in that direction, but it would have required a new planning. But yea I <3 :hover wherever I can

Collectives™ on Stack Overflow

React JS toggle/ adding a class on hover

2 Answers 2

14 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related