react-bootstrap/react-overlays

<Portal /> w/ typescript is broken for demo

Chubzorz opened this issue · 0 comments

When rendering something simple similar to the demo using typescript (.tsx file):

1.   const NewComponent: React.FC = () => {
2.   const subheadingRef = useRef<HTMLElement>(null);
3.   const isOpen = false; // Some selector or hook would normally go here
4.
5.   return (
6.     <div>
7.        <h1>Heading</h1>
8.        <h3 ref={subheadingRef} />
9.        <Portal container={subheadingRef}>
10.        {isOpen && <>Subheading</>}
11.      </Portal>
12.    </div>
13.   );
14.  };

An error on line 9 appears:
Type 'false | Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'. Type 'false' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.

It seems that the typing for the <Portal /> children differs from the documentation and the corresponding .d.ts declarations exported.