Why is ForwardRef causing error when using pair tag

Question

I have 3 tsx (jsx) files in my react app:

My index.tsx:

import ReactDOM from 'react-dom';
import Page from './Page';

ReactDOM.render(
    <Page />,
  document.getElementById('root')
);

Then my Page.tsx (which I render in index ↑):

import React from "react";
import Menu from "./Menu";

export default (props: any) => {
    let rf = React.useRef<HTMLDivElement>();
    return (
        <Menu ref={rf}>
        </Menu>
    )
}

And my Menu.tsx, which use forwardRef:

import React from "react"

export default React.forwardRef((props, ref:any) => {
    return (
        <div ref={ref}>
        </div>
    )
})

Problem is, that it gives me error in Page.tsx (in VS code is underlined opening Menu tag):

Type '{ children: never[]; ref: MutableRefObject<HTMLDivElement | undefined>; }' is not assignable to type 'IntrinsicAttributes & RefAttributes'.
Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes'.ts(2322)

When I remove enclosing tag from Menu (change it to self-closing element), it works:

import React from "react";
import Menu from "./Menu";

export default (props: any) => {
    let rf = React.useRef<HTMLDivElement>();
    return (
        <Menu ref={rf} />
    )
}

But I want (need) i to be paired (in order to write children element to it).

How can I solve it? Thanks! :)

Answer 1

<Tag/> means no children. <Tag></Tag> means takes children.

So your error is basically telling you that your trying to send children, but your <Menu/> component doesn't say it takes any.

The solution, react.forwardRef takes two generic arguments, the first is the type of DOM element your will be forwarding the ref too, and the second is what props it takes.

So using this info we should be able to convert your example by doing ->

import React from "react"

export default React.forwardRef<HTMLDivElement,{children: React.ReactNode}>(
(props, ref) => {
    return (
        <div ref={ref}>
           {props.children}
        </div>
    )
})

You will also notice I have also taken out the any on the ref, this will now be properly typed.

Your other problem is also in how your sending the ref, you will get 'MutableRefObject<HTMLDivElement | undefined>',

This is because you have not supplied a value to React.useRef, so indeed the value can be HTMLDivElement or undefined, and that's what the error says.

Simple solution just set the default to null, and TS will be happy. This works because MutableRefObject<T | null>, and null is actually a valid React component, basically acts like a No op render.

eg.

let rf = React.useRef<HTMLDivElement>(null);

Here is a working TS snippet.. TS Playground