React ForwardRef + Children + Props + Typescript

Question

I know that at a first glance this question seems to be a dupe, but I searched everywhere and cannot fit the answers into my use case.

Basically, I'm trying to forward a ref some levels deep until I found a DOM element and use this ref to access the element props on the higher-level component.

The Level2 component should be able to:

• Receive its own props (greet)
• Receive children
• Receive a ref and forward it (btnRef)

This is snippet can explain it better what I'm trying to do

interface Level2Props {
  greet: string;
}

const Level2 = React.forwardRef(
  (props: Level2Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
    return (
      <section>
        <button ref={ref} onClick={() => alert(props.greet)}>
          Click Me
        </button>
        {props.children}
      </section>
    );
  }
);

export default function App() {
  const [btnRef, setBtnRef] = React.useState();

  return (
    <section>
      <Level2 greet="Hello from level 2" ref={setBtnRef}>
        <div>Children from 1</div>
      </Level2>
      {btnRef && `Text from button: ${btnRef.innerHTML}`}
    </section>
  );
}

I'm having 3 problems here:

1. It says that props.children doesn't exist
2. I cannot pass ref={btnRef}, it says the types aren't compatible.
3. It says btnRef.current.innerHTML doesn't exist on type never

I tried everything on the const Level2 = ... line, but nothing seems to work (the code actually works, but the typings are wrong)

edit: to better illustrate the situation I've created an external sandbox. The mentioned errors are on lines 15, 26 and 29, respectively

edit 2: using useState in the example instead of useRef, the old sandbox is here

Answer 1

React Engine renders with a top-down approach, so you can't expect it to render a child and to rerender a parent with a child's data that is rendered later, unless child does not trigger a re-render of the parent itself. So in your case you must set your node in a React state. https://codesandbox.io/s/forwardref-children-ts-forked-zdielk?file=/src/App.tsx

You must be careful and call node update only if node !== prevRef , or you are going to have an infinite loop since the child render will trigger a rerender of Parent and then of child itself, and so on. You could also try to wrap your child in a React.memo() wrapper, to avoid further re-renders if props don't change.

I'm not sure that it's a good idea to compare two DOM nodes as a control node !== prevRef.current, but it works for the sake of the example simplicity