React component children error with typecript

Question

I started learning react with typescript a few days ago and I am getting this error

    /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx
TypeScript error in /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx(118,22):
No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children: string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal; disableGutters?: boolean | undefined; fixed?: boolean | undefined; maxWidth?: false | ... 5 more ... | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
      Type 'undefined' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
  Overload 2 of 2, '(props: DefaultComponentProps<ContainerTypeMap<{}, "div">>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
      Type 'undefined' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.  TS2769

    116 |       <main className={classes.content}>
    117 |         <ErrorAlert>
  > 118 |           <Container>{children}</Container>
        |                      ^
    119 |         </ErrorAlert>
    120 |       </main>
    121 |     </div>

Dashboard.tsx

const DashboardHOC: React.FC<React.ReactNode> = ({ children }) => {
   ...
    {children}
   ...
}

Error.tsx

const Error: React.FC<React.ReactNode> = ({ children }) => {
   ...
    {children}
   ...
}

What Am i doing wrong ?

Nicholas Tower · Accepted Answer · 2020-12-03 14:03:35Z

1

React.FC<React.ReactNode>

This means that your props will be a react node, which is never correct. Props are a plain object which you can define any number of properties on. Some of those properties might be react nodes, but the object itself will not.

If you're trying to specify that children is a ReactNode and there are no other props, then React.FC already does that and you can do:

const DashboardHOC: React.FC = ({ children }) => {

Or if you prefer to be explicit that there are no other props:

const DashboardHOC: React.FC<{}> = ({ children }) => {

answered Dec 3, 2020 at 14:03

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Collectives™ on Stack Overflow

React component children error with typecript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related