'How to set displayName for a wrapped function in React HOC in typescript without violating rules?
I'd like to make a React HOC in functional component. The below code gives me an error, Property 'displayName' does not exist on type '(props: T) => Element'.ts(2339)
export const withSomething = <T extends object>(WrappedComponent: React.ComponentType<T>) => {
const ComponentWithSomething: (props:T)=> JSX.Element = (props: T) => {
// Do Something
return <WrappedComponent {...(props as T)} />
}
const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'
ComponentWithSomething.displayName = `withSomething(${displayName})`
//shows an error: Property 'displayName' does not exist on type '(props: T) => Element'.
return ComponentWithSomething
}
If I don't specify a returned function type as (props:T)=> JSX.Element, then WrappedComponent is not recognized as a component. It fails to compile. How would you solve? Thank you in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
