React Typescript Error Argument of type 'Element' is not assignable to parameter of type 'ComponentType<unknown>'

Question

I tried to create a React HOC but unfortunately an error thrown as written below

Argument of type 'Element' is not assignable to parameter of type 'ComponentType<unknown>'.

The code written below,

import React from 'react';
import { Link } from 'react-router-dom';

export default function enrich<P>(WrappedComponent: React.ComponentType<P>) {
  function Enrich(props: P) {
    return <WrappedComponent {...props} />;
  }
  return Enrich;
}

enrich(<Link to="#" />);

How could I create a React HOC written in Typescript?

tabulaR · Accepted Answer · 2022-09-13 16:43:49Z

3

The Argument you are passing to the enrich function needs to be a component. If you hover over it it will probably show you something like:

type React.ComponentType<P = {}> = React.ComponentClass<P, any> | React.FunctionComponent<P>

this shows you that the element (instantiated react element) is not matching the type. You could pass a function wrapping the Link element for example like this:

enrich((props) => <Link to="#" {...props} />);

answered Sep 13, 2022 at 16:43

tabulaR

3103 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

React Typescript Error Argument of type 'Element' is not assignable to parameter of type 'ComponentType<unknown>'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related