How to use children with React Stateless Functional Component in TypeScript

Question

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?

Yura · Accepted Answer · 2019-05-07 16:36:10Z

189

You can use React.PropsWithChildren<P> type for your props:

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

answered May 7, 2019 at 16:36

Yura

3,2802 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Huy Pham Over a year ago

I think this answer may be considered the correct answer for now. Due to the discouragement of React.FunctionComponent (or the shorthand React.FC) in React Typescript Cheatsheet.

MikeBeaton Over a year ago

The answer is nearly working, but for me with an arrow function definition, const MyComponent: React.FunctionComponent<React.PropsWithChildren<MyProps>> = (props) => ( ... ) is required (typing the props variable directly, as per the answer, does not seem to get rid of all errors).

oligofren Over a year ago

@MikeBeaton For arrow functions your props are implicitly typed to have all the same props as PropsWithChildren, so there is no need to add that. That is just overhead. Just write FunctionComponent<MyProps>

MikeBeaton Over a year ago

@oligofren - With that change, it actually compiles and runs, but in my VS Code window I am getting an error highlighted with Property 'children' does not exist on type '{}'.. (Actually, no, the tests compile and run, but in the full build that change also causes: TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.)

pztrick · Accepted Answer · 2020-01-25 20:01:17Z

134

React 16.8 Update: Since React 16.8, the names React.SFC and React.StatelessComponent are deprecated. Actually, they have become aliases for React.FunctionComponent type or React.FC for short.

You would use them the same way though:

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

Before React 16.8 (Older):

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.StatelessComponent type.

For a component with your own custom 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.

edited Jan 25, 2020 at 20:01

pztrick

3,84132 silver badges35 bronze badges

answered Nov 23, 2016 at 14:34

Leone

3,4333 gold badges24 silver badges33 bronze badges

3 Comments

Aaron Beall Over a year ago

Thanks! It seems I'm on an old version of the typings that doesn't support this... I guess it's time to bite the bullet and use TS 2.0 with @types

Alexander Kachkaev Over a year ago

React.StatelessComponent / React.SFC are deprecated. It is recommended to refer to React.FunctionComponent instead.

FunkeyFlo Over a year ago

Note that this method does not work if you have a generic component

chris6953 · Accepted Answer · 2020-11-07 13:40:48Z

Simpler answer: Use ReactNode:

interface MyProps {
  children?: React.ReactNode
}

If children is optional or not (i.e. having ? or not) depends on your component. The ? is the most concise way to express that, so nothing wrong with that.

On history: This was not necessarily the correct answer back when originally asked: The type ReactNode was added in (almost) its current form in March 2017 by this pull request only, but almost everyone reading this today should be on a modern enough version of React.

Lastly, about passing children as "attribute" (which, in React lingo, would be passing it as "prop", not attribute): It is possible, but in most cases reads better when passing JSX children:

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

reads more easily than

<MyComponent children={<p>This is part of the children.</p>} />

N S Niko · Accepted Answer · 2020-12-11 13:47:23Z

3

You can just add children to the component and if it is connected to a container that is all you need.

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}

answered Dec 11, 2020 at 13:47

N S Niko

1052 bronze badges

1 Comment

Zsolt Meszaros Over a year ago

And it was a TypeScript question.

Steve Owens · Accepted Answer · 2024-01-18 17:47:41Z

0

Personally it's pretty easy in later versions of react when using typescript such as Next-JS 14

export default function TwButton({children, type, role } : {children?: 
 ReactNode,
        type?:"submit" | "reset" | "button",
        role?: "OK" | "CANCEL" | "RESET"
         }){
....
}

answered Jan 18, 2024 at 17:47

Steve Owens

671 silver badge2 bronze badges

Comments

Jun Yin · Accepted Answer · 2020-06-03 22:41:43Z

-2

You can use

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

answered Jun 3, 2020 at 22:41

Jun Yin

2,4273 gold badges18 silver badges19 bronze badges

1 Comment

Arjan Over a year ago

React.SFC is deprecated

Collectives™ on Stack Overflow

How to use children with React Stateless Functional Component in TypeScript

6 Answers 6

4 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related