CODEWITHSUNDEEP
reactjs
Jon Nicholson
Jon Nicholson

Reputation: 1161

onMouseOver in React element selecting all elements rather than just single

I've setup a component which onMouseOver display a 'div' which states what the component is, as it's a link.

However, when you hover over any single one of the elements, it displays all of the 'divs' instead of just the appropriate one to hover.

I know this is because my function 'generally' sets the state, and if said state is true it displays all - but I don't know how to refactor my code to select only the relevant one.

Here's my code:

class SideNav extends Component {
  constructor(props) {
    super (props)
    this.state = {
      linkHover: false
    }
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

  }

  onMouseEnter() {
    this.setState({
      linkHover: true
    });
  }

  onMouseLeave() {
    this.setState({
      linkHover: false
    })
  }

  render() {
    return (
      <div>
      <section className="side-nav-section">
        <div className="side-nav-container">

          <div className="side-nav-links-container">
            <div className="side-nav-link" link="new-debt" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Link a debt</p> <span className="side-nav-link-span"></span> </div> : null }
            </div>


            <div className="side-nav-link" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Dashboard</p> <span className="side-nav-link-span"></span> </div> : null }
            </div>


            <div className="side-nav-link" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Analytics</p> <span className="side-nav-link-span"></span> </div> : null }

            </div>


          </div>
        </div>
      </section>

      </div>
    )
  }
}

I feel like I should know this, it seems like a straightforward problem but can't figure it out.

Any pointers would be appreciated!

Upvotes: 1

Views: 599

Answers (1)

Wu Wei
Wu Wei

Reputation: 2297

Simplest approach here would be using an Int to identify the element. Then you pass it as param to onMouseEnter. onMouseLeave just sets it to false, so nothing is being displayed.

this.state = {
  linkHover: false
}

onMouseEnter(id) {
  this.setState({
    linkHover: id
  });
}

onMouseLeave() {
  this.setState({
    linkHover: false
  })
}

<div className="side-nav-link" link="new-debt" onMouseEnter={() => this.onMouseEnter(0)} onMouseLeave={this.onMouseLeave}>
   { this.state.linkHover == 0 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Link a debt</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

<div className="side-nav-link" onMouseEnter={() => this.onMouseEnter(1)} onMouseLeave={this.onMouseLeave}>
   { this.state.linkHover == 1 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Dashboard</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

<div className="side-nav-link" onMouseEnter={() => this.onMouseEnter(2)} onMouseLeave={this.onMouseLeave}>
  { this.state.linkHover == 2 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Analytics</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

As soon as you are familiar with the class components of React, I would advise you to have a look at the newer funtional components with hooks. They produce a much more readable code!

Upvotes: 1

Related Questions