TypeScript error: Property 'children' does not exist on type 'ReactNode'

Issue

export const PageViewTracker = ({ children }: ReactNode): ReactElement => {

    usePageView();

    return children;
};

Problem:

This function returns error »Property ‘children’ does not exist on type ‘ReactNode’«

My approach to solution:

I tried out several types but only any works which is not what I want. Usually I used ReactNode for children props and it worked fine. In this case TypeScript seems to have issues.

Solution

The reason why you’re getting that error is because you’re giving the ‘ReactNode’ interface to an object ({}: Type). children itself is of the type ReactNode:

type PropsWithChildren<P> = P & { children?: ReactNode };

You should give your PageViewTracker the FunctionComponent (or its alias FC) type.

export const PageViewTracker: React.FC = ({ children }) => {
   ...
}

which has the following interface:

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

So by default it accepts the children prop which has the type ‘ReactNode’.

Answered By – Alserda

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.