Typescript / React: Property 'children' is missing in type with function statement

Question

I have a React component that takes children.

Getting a Typescript error:

Property 'children' is missing in type ... but required in type 'FixedWidthLayout'

That component is defined like a function statement.

export default function FixedWidthLayout { ... }

I don't want to write it like and expression..

i.e.

export const FixedWidthLayout = () => {...}

Therefore doing something like ...

const FixedWidthLayout: React.FC<Props> = () => {...}

..is not an option.

How is it possible to make this work with in Typescript with a function statement?

subashMahapatra · Accepted Answer · 2020-06-11 22:09:53Z

7

You can use React.PropsWithChildren, which will take a type argument for the props that you want to pass to the component other than the children. The return type for the component can be React.ReactNode.

interface IProps {
  // props you want to pass to the component other than the children
}

export default function FixedWidthLayout(props: React.PropsWithChildren<IProps>): React.ReactNode {

  return (
    <div>
      {props.children}
      {/*The jsx code for the component*/}
    </div>
  )

}

answered Jun 11, 2020 at 22:09

subashMahapatra

6,8872 gold badges23 silver badges27 bronze badges

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

1 Comment

Tim Scott Over a year ago

If you don't care to type the other props, this works React.PropsWithChildren<any>.

Karol Majewski · Accepted Answer · 2020-06-11 21:55:16Z

1

Where are you getting the error?

This should just work:

import * as React from 'react';

interface Props {
  children: React.Node;
}

export default function FixedWidthLayout(props: Props): JSX.Element {
  /* ... */
}

<FixedWidthLayout>Hello</FixedWidthLayout>

answered Jun 11, 2020 at 21:55

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Collectives™ on Stack Overflow

Typescript / React: Property 'children' is missing in type with function statement

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related