How to add an onClick to a parent from within React Component whose Ref is passed to it?

46
December 04, 2021, at 11:20 AM

I am working on a Reusable Menu Component.

It takes an array of objects and generates the Menu based on the array sent as prop.

This menu will always be triggered on click.

Now what I wanted to do is have the onClick implementation(event listeners, onClick function, etc) inside the Menu component itself.

How I planned on doing it was assigning a Ref to whatever is the Parent of the menu(the element that needs to be clicked for the menu to show) and sending that ref down to Menu and using the Ref to attach the onClick function onto the parent.

Parent.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>
     </>
   ) 
}

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

The problem is every function of parentRef.current.* is returning null.

A console.log of parentRef is yielding an object with the current havin the entire <li> tag as expected. But I am not getting how to assign an onClick onto it.

Any help is appreciated.

Answer 1

function call: parentRef.current.onClick(onParentClick)

function assignment: parentRef.current.onclick = function

READ ALSO
Run tracert command in Python but stop at &quot;request timed out&quot;

Run tracert command in Python but stop at "request timed out"

I need to tracert an IP and I am doing it like this:

62
Is there any way to perform rollback in firebase cloud functions?

Is there any way to perform rollback in firebase cloud functions?

We are running a larger backend application in NodeJS/TS on Firebase with about 180 cloud functions and Firestore as databaseFirebase has been good for our needs so far, but we are getting to a level of usage where even small amounts of down-time can cause a lot of damage

48
PHP Post callback Failed

PHP Post callback Failed

i am not getting php post callback to my file

50
Retrieve Iframe Height with Ajax Call

Retrieve Iframe Height with Ajax Call

I have found many questions here about getting iframe's height and set it via Javascript or jQuery however in my case none have workedI've installed MailChimp Plugin on a wordpress website to load the newsletters within tabs based on years and months

65