How to pass ref from child to parent with nested components?

Asked Sep 16 '22 at 13:49

Active Sep 16 '22 at 14:10

Viewed 301 times

How to pass ref from child to parent through several nested components? forwardRef working only for directly child to parent way

Child:

const Menu = forwardRef((props, menuRef) => { 
  return <div ref={menuRef}></div>
}

Parent:

const Header = () => {
  const menuRef = useRef(null)
  return {<Menu ref={menuRef}/>}
}

Parent of the parent:

const Layout = () => {

...here I want ref from child

edited Sep 16 '22 at 14:10

isherwood

asked Sep 16 '22 at 13:49

Danko

Why do you want to do that? – Konrad Sep 16 '22 at 13:49
Please add the code that you have tried? – Amila Senadheera Sep 16 '22 at 13:50
did you try to pass via `useContext()`? – Ozgur Sar Sep 16 '22 at 13:52
I want to render part of the menu from the header on the page – Danko Sep 16 '22 at 13:52
Reasons for doing this are often faulty. Data down, events up. You might explain your situation better so we can provide the best solution. – isherwood Sep 16 '22 at 14:09
Also, this has been discussed at length already. [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/q/38394015/1264804) – isherwood Sep 16 '22 at 14:11
Ok, I think it will be easier to render the menu 2 times – Danko Sep 16 '22 at 14:21

0 Answers0