Tengo un problema con react.js, soy nuevo en esto y hasta ahora no he visto preguntas como las mías.

Mi problema es que quería reproducir el sitio web de juegos épicos para aprender a reaccionar, pero no puedo hacer el menú de diseño desplegable.

Así que esto es lo que he hecho hasta ahora (intenté muchas cosas pero mi resultado final es este):

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

Y la parte html:

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

Pero esto no es lo que quiero exactamente, tengo 7 elementos para configurar de oculto a visible. La forma en que quiero hacerlo es apuntando a cada componente secundario con la función "onMouseEnter" a través del elemento col-2.

Lo que deseo es cambiar la clase anterior a una nueva pasando col-2 para mostrar el bot_menu en MonseEnter. La parte css está lista, mi problema es solo con la parte de reacción. Entonces, el className anterior se "oculta" y onMouseEnter lo establece en className "visible".

Y para hacerlo apuntando a elementos secundarios, solo tengo que hacerlo una vez y no 7 veces.

Por favor