How to pass children type to props of HOC react

Question

I am new to TypeScript and I am struggling to write HOC with typecheck. Here's my HOC:

import React from 'react';
import Firebase from './Firebase';

export type FirebaseType = Firebase;

interface OwnProps {
  firebase: typeof Firebase;
}

const FirebaseContext = React.createContext(new Firebase());

export const withFirebase: React.FC = <T extends OwnProps>(
  Component: React.ComponentType<T>,
): React.ComponentType<T> => (props) => (
  <FirebaseContext.Consumer>
    {(firebase: FirebaseType) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default FirebaseContext;

It throws an error:

Type '(Component: React.ComponentType) => React.ComponentType' is not assignable to type 'FC<{}>'. Types of parameters 'Component' and 'props' are incompatible. Type '{ children?: ReactNode; }' is not assignable to type 'ComponentType'. Type '{ children?: ReactNode; }' is not assignable to type 'FunctionComponent'. Type '{ children?: ReactNode; }' provides no match for the signature '(props: PropsWithChildren, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | null'.ts(2322)

I have absolutely no idea how to move on with this code or how to make it work.

Any thoughts?

Dear @VasylButov, you can react [this post](https://stackoverflow.com/questions/53688899). maybe it helps you. — AmerllicA, Jan 18 '20 at 10:24

score 4 · Accepted Answer · answered Jan 14 '20 at 01:03

Here's what that error means:

In your type definition, you're expecting withFirebase to have the same type signature as a function component (React.FC), which takes in props and returns a React element (or null).

However, that's not what you want from a HOC, you want it to take in a Component (React.ComponentType) and return a Component (React.ComponentType).

This should work:

type HOC = (Component: React.ComponentType) => React.ComponentType;
// Or, if you want to be more specific:
// type HOC = <T extends OwnProps>(Component: React.ComponentType<T>) => React.ComponentType<T>

export const withFirebase: HOC = <T extends OwnProps>(
  Component: React.ComponentType<T>,
): React.ComponentType<T> => (props) => (
  <FirebaseContext.Consumer>
    {(firebase: FirebaseType) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

Or you can also just omit the HOC type, and TypeScript will infer the correct type from the function definition.

Yes, thank you a lot! This solves TS errors, however, if I import withFirebase(Component) from some other file it says I didn't provide firebase prop (which I did in HOC) and asks me to implicitly set it. How do I solve it, sir? — Vasyl Butov, Jan 26 '20 at 11:26
fixed return type to ```React.ComponentType> & WithFirebase``` and it seems to be fine! Thanks! — Vasyl Butov, Jan 26 '20 at 11:38
Is there any way to do this from the component itself instead the HOC? — SalahAdDin, Aug 09 '21 at 22:04

How to pass children type to props of HOC react

1 Answers1