Typing Function Components with Children

Typing Function Components while using children has changed since React 18+.

Previous to React 18, FC included children.

Now, the types for FC do not include children.

// @types/react
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

Instead, one can use PropsWithChilden as a shortcut to specifying children type for your Function.

// @types/react
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

Examples

import { FC, PropsWithChildren, ReactNode } from 'react';

// Arrow function: explicitly typing children
type PropsA = {
  children: ReactNode;
};
export const A = ({ children }: PropsA): JSX.Element => <>{children}</>;

// Arrow function (shortcut)
type PropsB = FC<PropsWithChildren<Record<string, unknown>>>;
export const B: PropsB = ({ children }) => <>{children}</>;

// Named function (explicitly)
type PropsC = {
  children: ReactNode;
};
export function C({ children }: PropsC): JSX.Element {
  return <>{children}</>;
}

// Named function (shortcut)
export function D({
  children,
}: PropsWithChildren<Record<string, unknown>>): JSX.Element {
  return <>{children}</>;
}