Typescript with React - use HOC on a generic component class

Question

I have a generic React component, say like this one:

class Foo extends React.Component, FooState> {
    constructor(props: F         


        

Answer 1

Thanks for asking this question. I just figured out a way to specify a type parameter to a component after wrapping it with an HOC and I thought I'd share.

import React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import { RemoveProps } from '../helpers/typings';

const styles = {
  // blah
};

interface Props {
  classes: any;
  items: T[];
  getDisplayName: (t: T) => string;
  getKey: (t: T) => string;
  renderItem: (t: T) => React.ReactNode;
}

class GenericComponent extends React.Component, State> {
  render() {
    const { classes, items, getKey, getDisplayName, renderItem } = this.props;

    return (
      

        {items.map(item => (
          

            
{getDisplayName(item)}
            
{renderItem(item)}
          
        ))}
      
    );
  }
}

//