Get component name in React

Question

I\'m developing a React application. I have a Loading component, which is a little animation for waiting. I want to add a message in this Loading component according to the

Answer 1

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 (
            

                {this.state.displayLoading && }
            
        );
    }
}

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'