CODEWITHSUNDEEP
reactjs
Varid Vaya
Varid Vaya

Reputation: 394

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

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?

Upvotes: 0

Views: 2668

Answers (1)

tabulaR
tabulaR

Reputation: 310

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} />);

Upvotes: 3

Related Questions