React-Typescript: JSX element type 'Component' does not have any construct or call signatures

Question

I wrote hoc withContex:

import React from 'react';
import permissionContext from 'context';

interface Props {
 Component: () => React.Component;
}

const withContext: React.FC<Props> = Component => {
 return function contextComponent(props: any) {
  return (
   <permissionContext.Consumer>
    {context => <Component {...props} permissionContext={context} />}
   </permissionContext.Consumer>
  );
 };
};

export default withContext;

and i have a problem with 'Component' prop:

JSX element type 'Component' does not have any construct or call signatures.

In the other component, with uses this hoc i see:

Argument of type 'FC<Props>' is not assignable to parameter of type 'PropsWithChildren<Props>'.
Property 'Component' is missing in type 'FC<Props>' but required in type 'Props'.

I'm cleary new in typescript.

Clarity Clarity · Accepted Answer · 2020-02-25T08:02:12

withContext is not a React component but a function that returns one. Also component names should be capitalised. Try this:

const withContext = (Component: React.FC<Props>) => {
  return function contextComponent(props: any) {
    return (
      <permissionContext.Consumer>
        {context => <Component {...props} permissionContext={context} />}
      </permissionContext.Consumer>
    );
  };
};

React-Typescript: JSX element type 'Component' does not have any construct or call signatures

1 Answers