How do I make a higher order React component with Typescript?

Question

I'm trying to make a higher order component with Typescript, but I'm getting a type mismatch. I completely stripped it down, so it should just wrap the component, but still getting the error:

import * as React from 'react';

export function createPage<Props extends {}, ComponentType extends React.ComponentType<Props>>(
  Component: ComponentType
) {
  return class WrappedComponent extends React.Component<Props> {
    render() {
      return <Component {...this.props}></Component>;
    }
  }
}

The error I'm getting is:

Type 'Readonly & Readonly<{ children?: ReactNode; }>' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<ComponentType, PropsWithChildren>'.

It looks like IntrinsicAttributes can match nothing, but LibraryManagedAttributes is absolutely inscrutable to me.

Paul Huynh · Accepted Answer · 2021-05-27 02:28:21Z

2

You only need to provide a generic argument for the Props

export function createPage<Props>(
  Component: React.ComponentType<Props>
) {
  return class WrappedComponent extends React.Component<Props> {
    render() {
      return <Component {...this.props}></Component>;
    }
  }
}

Playground

answered May 27, 2021 at 2:28

Paul Huynh

3,3701 gold badge13 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

peterjwest Over a year ago

Thanks, that does it! Can you explain why this works?

Collectives™ on Stack Overflow

How do I make a higher order React component with Typescript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related