Estoy trabajando en un componente de menú reutilizable.

Toma una matriz de objetos y genera el Menú basado en la matriz enviada como apoyo.

Este menú siempre se activará al hacer clic.

Ahora, lo que quería hacer es tener la implementación onClick (escuchas de eventos, función onClick, etc.) dentro del propio componente Menu .

La forma en que planeé hacerlo fue asignar una Ref a lo que sea el Parent del menú (el elemento en el que se debe hacer clic para que se muestre el menú) y enviar esa referencia al Menu y usar la Ref para adjuntar la función onClick en el padre.

Padre.jsx

 import React, {useRef} from 'react'; const Parent = () => { const menuRef = useRef(null); return( <> {/* A lot of elements */} <ul type="none"> <li>Some svg's in a list</li> . . . <li ref={menuRef}> <svg>Another svg...</svg> <Menu parentRef={menuRef} items={menu} /> </ul> </> ) }

Menú.jsx

 import React, {useState} from 'react'; const Menu = ({parentRef,items}) => { const [isMenuActive, setMenuActive] = useState(false); const onParentClick = (e) => { // some code and then setMenuActive(!isMenuActive); } // This is what I intended to do parentRef.current.onClick(onParentClick); return( <div className={`menu-container ${isMenuActive ? 'active' : '' }`} {/* Menu population code */} </div> ) }

El problema es que todas las funciones de parentRef.current.* devuelven null .

Un archivo console.log de parentRef un objeto con la etiqueta current que tiene la etiqueta <li> completa como se esperaba. Pero no entiendo cómo asignarle un onClick.

Cualquier ayuda es apreciada.