React Functional Components with Dot Notation

[unreal junco]

Hi! I'm trying to create a function React component that uses dot notation using the following:

type BodyComponent = React.FunctionComponent;
type ModalComponent = React.FunctionComponent & {
    Body: BodyComponent;
}

const Modal: ModalComponent = ({children}): JSX.Element => (<dialog>{children}</dialog>);
const Body: BodyComponent = ({children}): JSX.Element => (<p>{children}</p>);

Modal.Body = Body;

However, I'm getting the array on both components that reads, Property 'children' does not exist on type '{}'. and I don't know hot to fix it

[hybrid tusk]

React.FunctionComponent doesnot include then children property by default

it was removed some time ago

if you want to pass your component children, you have to add that property back yourself

children: React.ReactNode

[austere nimbus]

or use React.PropsWithChildren<YourProps>

[unreal junco]

Alright, thanks!

[vernal skiff]

@unreal junco Easier if you just don't use FunctionComponent at all.

Here's how I'd write this:

type ModalProps = {
    children: React.ReactNode;
};
const Modal = ({ children }: ModalProps) => <dialog>{children}</dialog>;

type BodyProps = {
    children: React.ReactNode;
};
const Body = ({ children }: BodyProps) => <p>{children}</p>;

Modal.Body = Body;