Hover over menu item React

Question

I am trying to create a mega menu within react and the problem I have is that when hovering over the menu item the sub menu appears but as soon as the mouse leaves the menu item and goes over the sub menu , the sub menu then closes.

How can I stop the <hoverMenu /> from unmounting when the mouse leaves the menu item?

Also I'm sure this is a bad way to check the state and which tab is being hovered over but I tried a swtich statement and coulnd't get that to work so If there is a better way to write this that would be great:

{this.state.tabId === 1 && this.state.hover === true ? <HoverMenu text="Menu for Item 1" /> : '' }

I would put this in a webpack.bin demo but it threw lint errors to my mouseOut and mouseOver functions, not sure why.

Categories.jsx

const Wrapper = styled.div`
  position:relative;
  width:100%;
  height:46px;
  background: #90BA41;
`

export default class Categories extends React.Component { // eslint-
disable-line react/prefer-stateless-function
  constructor() {
    super()
    this.state = { hover: false, tabId: '' }
    this.mouseOver = this.mouseOver.bind(this)
    this.mouseOut = this.mouseOut.bind(this)
  }

mouseOver = (id) => {
this.setState({ hover: true, tabId: id })
}

mouseOut = (id) => {
this.setState({ hover: false, tabId: id })
}

render() {
const tabs = items.map(item =>
  <div
    className="cell"
    key={item.id}
    onMouseEnter={() => this.mouseOver(item.id)}
    onMouseLeave={() => this.mouseOut(item.id)}
  >
    <NavLink
      to="/"
    >{item.name}
    </NavLink>
  </div>,
)

return (
  <Wrapper>
    <div className="grid grid--flexcells gridxs--full gridsm--full grid--md-1of2 gridlg--1of2 gridxl--1of12">
      {tabs}
    </div>
    <div>
      {this.state.tabId === 1 && this.state.hover === true ? <HoverMenu text="Menu for Item 1" /> : '' }
      {this.state.tabId === 2 && this.state.hover === true ? <HoverMenu text="Menu for Item 2" hover={this.state.hover} /> : '' }
      {this.state.tabId === 3 && this.state.hover === true ? <HoverMenu text="Menu for Item 3" /> : '' }
      {this.state.tabId === 4 && this.state.hover === true ? <HoverMenu text="Menu for Item 4" /> : '' }
      {this.state.tabId === 5 && this.state.hover === true ? <HoverMenu text="Menu for Item 5" /> : '' }
      {this.state.tabId === 6 && this.state.hover === true ? <HoverMenu text="Menu for Item 6" /> : '' }
      {this.state.tabId === 7 && this.state.hover === true ? <HoverMenu text="Menu for Item 7" /> : '' }
      {this.state.tabId === 8 && this.state.hover === true ? <HoverMenu text="Menu for Item 8" /> : '' }
      {this.state.tabId === 9 && this.state.hover === true ? <HoverMenu text="Menu for Item 9" /> : '' }
      {this.state.tabId === 10 && this.state.hover === true ? <HoverMenu text="Menu for Item 10" /> : '' }
      {this.state.tabId === 11 && this.state.hover === true ? <HoverMenu text="Menu for Item 11" /> : '' }
      {this.state.tabId === 12 && this.state.hover === true ? <HoverMenu text="Menu for Item 12" /> : '' }
    </div>
  </Wrapper>
)
}
}

HoverMenu.jsx

const Wrapper = styled.div`
  position:absolute;
  width:100%;
  height:200px;
  background:#fff;
  z-index:999;
  `

const HoverMenu = () => (
<Wrapper> {this.props.text}</Wrapper>
 )

Answer 1

The problem is that you are setting the onMouseOut listener on your primary menu, rather than your sub-menu, so when you leave the primary menu the state changes. Move the onMouseOut listener to the wrapper that includes all of your sub menus.

I'd also recommend abstracting out a helper method that determines whether each item is shown, and using && instead of a ternary.

mouseOut = () => {
  this.setState({ hover: false })
}

isShown(num) {
  return this.state.tabId === num && this.state.hover === true
}

render() {
  const tabs = items.map(item =>
    <div
      className="cell"
      key={item.id}
      onMouseEnter={() => this.mouseOver(item.id)}
    >
      <NavLink to="/">{item.name}</NavLink>
    </div>,
  )

  return (
    <Wrapper>
      <div className="grid grid--flexcells gridxs--full gridsm--full grid--md-1of2 gridlg--1of2 gridxl--1of12">
        {tabs}
      </div>
      <div onMouseLeave={this.mouseOut}>
        {isShown(1) && <HoverMenu text="Menu for Item 1" />}
        {isShown(2) && <HoverMenu text="Menu for Item 2" />}
        {isShown(3) && <HoverMenu text="Menu for Item 3" />}
        {isShown(4) && <HoverMenu text="Menu for Item 4" />}
        ...
      </div>
    </Wrapper>
  )
}