react/display-name regression

[adriangodong]

I have the following code that was working with eslint@7.32.0 and eslint-plugin-react@7.26.1:

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 eslint@8.1.0, 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.