Aaron Aaron - 10 days ago 10
React JSX Question

How to use children with React Stateless Functional Component in TypeScript?

Using TypeScript with React we no longer have to extend

React.Props
in order for the compiler to know that all react component props can have children:

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}


However, it doesn't seem to be the case for stateless functional components:

const MyStatelessComponent = (props: MyProps) => {
return (
<div>{props.children}</div>
);
};


Emits the compile error:


Error:(102, 17) TS2339: Property 'children' does not exist on type
'MyProps'.


I guess this is because there's really no way for the compiler to know that a vanilla function is going to be given
children
in the props argument.

So the question is how should we use children in a stateless functional component in TypeScript?

I could go back to the old way of
MyProps extends React.Props
, but the
Props
interface is marked as deprecated, and stateless components don't have or support a
Props.ref
as I understand it.

So I could define the
children
prop manually:

interface MyProps {
children?: React.ReactNode;
}


First: is
ReactNode
the correct type?

Second: I have to write children as optional (
?
) or else consumers will think that
children
is supposed to be an attribute of the component (
<MyStatelessComponent children={} />
), and raise an error if not provided with a value.

It seems like I'm missing something. Can anyone provide some clarity on whether my last example is the way to use stateless functional components with children in React?

Answer

For now, you can use the React.StatelessComponent<> type, as:

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

What I have added there is setting the return type of the component to React.Stateless component.

For a component with your own customer props (like MyProps interface):

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Now, props has got the children property as well as those from MyProps interface.

I checked this in typescript version 2.0.7

Additionally, you can use React.SFC instead of React.StatelessComponent for brevity.

Comments