react/display-name regression

[adriangodong]

I have the following code that was working with [email protected] and [email protected]:

export function wrapComponent<T>(WrappedComponent: React.ComponentType<T>): React.ComponentClass<T>
{
    return class extends React.Component<T>
    {
        displayName = `wrapped(${WrappedComponent.displayName})`;

        render()
        {
            ...
        }
    }
    return Container;
}

After upgrading to [email protected], there's a linting error for react/display-name rule.

If I extract the class into an actual class and then return it, the linting error goes away, e.g.:

export function wrapComponent()...
{
    class Wrap extends React.Component<T>
    {
        displayName = `wrapped(${WrappedComponent.displayName})`;
        ...
    }
    return Wrap;
}

[ljharb]

We don't support eslint 8 yet; see #3055.