how to Build a HOC with react and TS arrow functions with generic as a

Viewed 116

I'm trying to build a HOC Component to wrap any component within my application so that I can apply sort of unique styles, functionality within any wrapped component,

so here is how I expect it to work

<Wrapper> 
  <ChildComponent onClick={someFunctionality} />
</Wrapper

and here is my wrapper functionality

import React from 'react';

interface WrapperTypes <T> {
    Component: React.ComponentType<T>;
    props: T
}

const Wrapper =<T,> ({Component, props}: WrapperTypes<T>): React.ReactElement => {
    return (
        <div>
            <Component {...props} />
        </div>    
    )
};

export default Wrapper;

and I get this error when I do it this way

Type '{ children: (string | Element)[]; }' is missing the following properties from type 'WrapperTypes<unknown>': Component, props
0 Answers
Related