CODEWITHSUNDEEP
reactjstypescripttypescript-typingschildrenreact-props
linuxdan
linuxdan

Reputation: 4854

What is the correct typescript type for react children?

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.

Upvotes: 20

Views: 26363

Answers (4)

Branko Dimitrijevic
Branko Dimitrijevic

Reputation: 52107

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"
        }
    }
/>

Upvotes: 1

simPod
simPod

Reputation: 13456

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

Upvotes: 0

Wong Jia Hau
Wong Jia Hau

Reputation: 3069

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
}

Upvotes: 0

linuxdan
linuxdan

Reputation: 4854

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;

Upvotes: 39

Related Questions