CODEWITHSUNDEEP
reactjstypescriptgenerics
Socrates
Socrates

Reputation: 9604

Generic type of React.Component

What is the generic type of a React Component?

Components could be from classes such as:

export class MaskCompanyList extends React.Component<MaskCompanyListProps, MaskCompanyListState> {
    public render() {
        ...
    }
}

export class MaskPersonDetail extends React.Component<MaskPersonDetailProps, MaskPersonDetailState> {
    public render() {
        ...
    }
}

I tried to create this generic class, but I get an error for missing properties:

Not working generic:

private getMask<T, R>(): React.Component<T, R> {
    return <MaskCompanyList />;
}

Error message from TSLint:

Type 'Element' is missing the following properties from type 'Component<T, R, any>': context, setState, forceUpdate, render, and 2 more.

The class component class React.Component<A, B> is always the same, but the Classes of

Upvotes: 0

Views: 284

Answers (1)

brietsparks
brietsparks

Reputation: 5016

In your example getMask, the return signature is a react component, but you are returning a react element.

To type a component:

private getMaskComponent(): React.ComponentType<MaskCompanyListProps> {
  return MaskCompanyList;
}

To type an element:

private getMaskElement(): React.ReactElement {
  return <MaskCompanyList />
}

Upvotes: 1

Related Questions