How to set display name for a React class (ES6)?

Question

I've tried several methods in setting the display name for my React Component, but none has worked: I tried to set it as a public static variable like this:

class Base extends React.Component<any, any>{
    public static displayName = "Base";
    constructor(props){
        ...
    }
    render(){
        ...
    }
}

But eslint still throws me this error:

error Component definition is missing display name react/display-name

I tried an alternative approach where I set it outside the class definition:

class Base extends React.Component<any, any>{
    constructor(props){
        ...
    }
    render(){
        ...
    }
}
Base.displayName = "Base";

And I end up getting an error saying:

Property 'displayName' does not exist on type 'typeof Base'.

I've tried different methods from other Stackoverflow posts but I can't seem to get rid of the error. How can I resolve this? Please help.

edit: answered my own question below. The core of this problem seemed to be regarding anonymous functions rather than the React class.

Answer 1

Instead of using public static displayName = "Base"; remove public and use it like static displayName = "Base";

class Base extends React.Component<any, any>{
    static displayName = "Base";
    constructor(props){
        ...
    }
    render(){
        ...
    }
}