score:-4

Accepted answer

You don't need it to be dynamic since you are writing the component yourself and can pass it as a string

class LoginForm extends React.Component {
    render() {   
        return (
            <div className="login-form-root">
                 {this.state.displayLoading && <Loading loadingFrom="LoginForm "/>}
            </div>
        );
    }
}

However if you still need to access the name of the component, you could define the displayName property on the component

class LoginForm extends React.Component {
   static displayName = 'LoginForm';
    render() {   
        return (
            <div className="login-form-root">
                 {this.state.displayLoading && <Loading loadingFrom="LoginForm "/>}
            </div>
        );
    }
}

and access it like Component.displayName.

score:0

After searching with debugger, in newer versions you should use this._reactInternalFiber.elementType.name instead of this._reactInternalInstance.getName()

score:0

To make it work after webpack build you can assign a property to the function

function MyComponent() {
  return (
    <div />
  );
}
MyComponent.componentName = 'MyComponent';

function ParentComponent({ children }) {
  console.log("Children name", children.type.componentName);
}

score:1

For HOCs: you can use WrappedComponent.name

score:33

Every React.Component has a property called displayName that JSX sets automatically, so theoretically you can use that property

class LoginForm extends React.Component {
    render() {   
        return (
            <div className="login-form-root">
                {this.state.displayLoading && <Loading loadingFrom={this.displayName}/>}
            </div>
        );
    }
}

UPDATE (after multiple comments saying its not working)

As per convention, react offers a code snippet to wrap getting the component name on their documentation which is the following:

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

As can be seen, they first check the display name, then the component name, and if all fails, then it will be just 'Component'

score:61

Class Components

You can use this.constructor.name to obtain the name of your component.

(Using React 16.x as of this writing)

Caveat: This won't work if you're minifying for production with Webpack.

Functional Components

https://reactjs.org/docs/react-component.html#displayname


Related Query

More Query from same tag