Generic components with higher order components

Question

I'd like to give my React component props a generic type but this is being lost when I wrap it in a higher order component (material-ui) how do I pass along the required information?

type Props<T> = {
  data: Array<T>;
}

class MyComponent<T> extends React.Component<Props<T>> {

const StyledComponent = withStyles(styles)(MyComponent)

Using <StyledComponent<myType gives an error as it doesn't know about the generic.

Answer 1

My bet is to annotate your new component like this:

const StyledComponent: <T>(props: OuterProps<T>) => JSX.Element = withStyles(styles)(MyComponent) ;

Mind you probably need to differentiate OuterProps and InnerProps, see below example I made for reference:

https://stackblitz.com/edit/hoc-generics

Hope that helps!