CODEWITHSUNDEEP
reactjs
Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

ReactJS: add class in single element on Hover event

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

Upvotes: 0

Views: 2673

Answers (1)

Ali Ankarali
Ali Ankarali

Reputation: 3127

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;

Upvotes: 3

Related Questions