What is the correct typescript type for react children?

Question

I'm trying to properly type the props for a component that maps children:

type Props = {
    children: any
}

const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children, someMapingFunction);

I've been using JSX.Element but that doesn't quite feel right.

Answer 1

Looking through the code under DefinitelyTyped it appears that children is typed as ReactNode.

Example:

type Props = {
    children: ReactNode
}

const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children, someMapingFunction);

Note: The ReactNode type can be found in the React namespace:

import React from 'react';

let someNode: React.ReactNode;

Answer 2

It's not ReactNode but ReactElement<any, any> | null.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e90f1299270f6d602fa1af074fb5b3b088c53c09/types/react/index.d.ts#L511

    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;
    }

Answer 3

Actually you don't have to specify children if you're using React.FunctionComponent.

For example the following codes compile without error:

const MyComponent: React.FC<{}> = props => {
  return props.children
}

Answer 4

The children is a prop like any other and can be of any type. It's only special insofar that child JSX elements are automatically mapped to the children prop.

So, while it's usually declared as children?: React.ReactNode, you could declare it as a render prop, or even as a custom type like so:

interface INameProps {
    children: {
        fistName: string,
        lastName: string
    }
}

const Name: React.FC<INameProps> = ({children}) => {
    return <div>{children.fistName} {children.lastName}</div>;
}

And then you can use it like so:

<Name>
    {
        {
            fistName: "John",
            lastName: "Smith"
        }
    }
</Name>

Which is the same as:

<Name
    children={
        {
            fistName: "John",
            lastName: "Smith"
        }
    }
/>