I face a problem with react.js, I'm new to it and haven't seen such questions as mine so far.

My problem is that I wanted to reproduce epic games website to learn react, but I can't manage to do the dropdown layout menu.

So here is what I've done so far (tried many things but my final result is this) :

const [selectedMenu, setSelectedMenu] = useState(null);

And the html part :

<div className="col-2" onMouseEnter={() => setSelectedMenu(1)}>
      <div className="wrapper">
        <li className="select-none bot_line">news & events</li>
      </div>
      {selectedMenu === 1 && (
        <div
          className="bot_menu"
          onMouseEnter={() => setSelectedMenu(1)}
          onMouseLeave={() => setSelectedMenu(null)}
        >}

But this is not what I want exactly, I have 7 element to set from hidden to visible. The way I want to do it is by targeting each child components with the "onMouseEnter" function through the col-2 element.

What I wish is to change the previous class to a new one by hovering col-2 to show the bot_menu onMonseEnter.The css part is done, my trouble is only with the react part. So the previous className to be "hidden" and onMouseEnter set it to "visible" className.

And to do it by targeting child elements so I only have to do it once and not 7 times.

Please