Aaron Aaron - 1 year ago 210
React JSX Question

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

Using TypeScript with React we no longer have to extend

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 (

Emits the compile error:

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

I guess this is because there's really no way for the compiler to know that a vanilla function is going to be given
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
interface is marked as deprecated, and stateless components don't have or support a
as I understand it.

So I could define the
prop manually:

interface MyProps {
children?: React.ReactNode;

First: is
the correct type?

Second: I have to write children as optional (
) or else consumers will think that
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 Source

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

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

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 =>

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download