[FIXED] how do you pass a generic type to an anonymous function in typescript tsx file

Issue

The following function is failing in a .tsx file:

export const withComponent = <T>(Component: React.ComponentType<T>) => (props: any) => (
  <shortcutContext.Consumer>
    {addShortcut => <Component addShortcut={addShortcut} {...props} />}
  </shortcutContext.Consumer>
);

With the error JSX element 'T' has no corresponding closing tag.

Solution

Looks like a limitation of .tsx parser, there is no way to make it interpret this particular < as a delimiter for generic parameter instead of start tag.

But for this particular case, the workaround is easy.

export const implies this is at the top level, and its implementation does not refer to this anyway, so it could be rewritten using an old-style function instead of the first =>:

export const withComponent = function<T>(Component: React.ComponentType<T>) { 
    return (props: any) => (
        <shortcutContext.Consumer>
            {addShortcut => <Component addShortcut={addShortcut} {...props} />}
        </shortcutContext.Consumer>
    )
};

Answered By - artem
Answer Checked By - - Candace Johnson (ReactFix Volunteer)