ReactJS: add class in single element on Hover event

Question

I'm working on a group of divs that expand a specific div on hover, my problem is when I hover on an element all the divs is affected.

I dont know why its happening,

Hope you understand me.

Thanks

Sample Code

constructor(props) {
    super(props);
    this.state = {
      isHovered: false
    };
    this.handleMenuHover = this.handleMenuHover.bind(this);
  }

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

  render() {
    const menuActive = this.state.isHovered ? "active" : "";
    return (
      <div className="slider-menu">
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          a
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          b
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          c
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          d
        </div>
      </div>
    );
  }

You need to keep track of the hover states of the individual divs, and change the class accordingly. The way you have it now, you're using the same hover state for all classes. — Colin Burke
– Colin Burke, Commented May 2, 2018 at 10:42

Ali Ankarali · Accepted Answer · 2018-05-02 12:30:52Z

2

Make a single div component with event handlers, then populate it. Example:

const Home = () => (
  <div>
    <Menu>a</Menu>
    <Menu>b</Menu>
    <Menu>c</Menu>
    <Menu>d</Menu>
  </div>
)

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovered: false
    };
    this.handleMenuHover = this.handleMenuHover.bind(this);
  }

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

  render() {
    const menuActive = this.state.isHovered ? "active" : "";
    return (
      <div className="slider-menu">
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default Home;

answered May 2, 2018 at 12:30

Ali Ankarali

3,1773 gold badges22 silver badges32 bronze badges

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

2 Comments

Gulzar Yousaf Over a year ago

it is working fine in the link but for me it adds class to all elements even if i am binding this with event handler.

user8617795 Over a year ago

The problem is that state must refer to only one of the elements, not all, hence having a component for each of the <div>s guarantees the single mapping between state and elements.

Collectives™ on Stack Overflow

ReactJS: add class in single element on Hover event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related