Call function parameter inside child component in react

Question

Since I am new to react, I have a function in my parent component like below

const openMenu = (item: Iitem) => {
    setNavOpen(item.id);
    closeMenu();
}

<ul>
    {navItems.map((navItem) => (
        <NavItem
            data={navItem}
            key={navItem.id}
            openMenu={openMenu}
        />
    ))}
</ul>

And I am trying to access the openMenu function from my child component

like this

<ItemButton
    id={data.id}
    onClick={openMegaMenu}
>
    Hello Test
</ItemButton>

I am trying to use the function like onClick={openMegaMenu(data)} but it throws an error like uncaught-typeerror-cannot-read-property-nextsibling-of-undefined . Can you please tell me what is the wrong here.

Can you show a bit more of your child component? When did the function changed name? What is data? Anyway you should call your function like this: onClick={() => {openMegaMenu(data);}} — coglialoro
– coglialoro, Commented Apr 25, 2022 at 15:38

larz · Accepted Answer · 2022-04-25 15:38:36Z

1

You were close! You want to pass a function to be called, not call the function, so the following should work

onClick={() => openMegaMenu(data)}

answered Apr 25, 2022 at 15:38

larz

5,7662 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call function parameter inside child component in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related