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 component which called it.

Here is how i call my Loading component (with this.state.displayLoading at true or false) :

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

I want to get "LoginForm" in my variable loadingFrom, which is the className. Maybe it's not the right way to do that.

So your login form manages its own loading state? Depending which technology you use behind the scenes this can generate some problems — Icepickle
– Icepickle, Commented May 5, 2017 at 9:08
I would prefer to have a this.component.name or something like that, is it possible ? — Vincent ROSSIGNOL
– Vincent ROSSIGNOL, Commented May 5, 2017 at 9:09
Sure that's possible (with some extra work) however, since you add it to the component itself (in your example) there is no reason why you should make your code more complex than necessary — Icepickle
– Icepickle, Commented May 5, 2017 at 9:10
@Icepickle, yes, during our requests to our JEE API that can take few seconds, we prefer to just display a screen instead of waiting on the login page. — Vincent ROSSIGNOL
– Vincent ROSSIGNOL, Commented May 5, 2017 at 9:10

Con Antonakos · Accepted Answer · 2021-06-04 20:22:57Z

67

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

edited Jun 4, 2021 at 20:22

answered Jan 31, 2018 at 20:16

Con Antonakos

1,80821 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Gabriel Garrett Over a year ago

It can work with webpack, you just have to set keep_fnames and keep_classnames to true in your production config's uglify options: github.com/LemonPi/issues_webpack_classname

Con Antonakos Over a year ago

@Andy Yes, most likely since I wrote this answer 3 years ago. I am happy to update it. How did the API change?

Andy Over a year ago

well, React now allows function components, which aren't classes, hence have no this.constructor.name. However, it seems from the docs that displayName is an official property of the React.Component class, and I believe displayName gets set automatically on function components as well.

Con Antonakos Over a year ago

@Andy You rock. Updated answer! 🙂

Mark Over a year ago

So this is interesting. A teammate of mine was calling .name on a functional component and it was working in our dev environment, but after building and pushing to a staging environment it was no longer working. We never explicitly set the name so it does exist on functional components. React 17.0.2 fwiw

|

Icepickle · Accepted Answer · 2019-01-15 12:45:23Z

32

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'

edited Jan 15, 2019 at 12:45

answered May 5, 2017 at 9:12

Icepickle

12.8k3 gold badges38 silver badges51 bronze badges

8 Comments

MrColes Over a year ago

I get undefined for that property.

Icepickle Over a year ago

@GeorgeJempty I updated with some more information I found on the documentation site, I personally think React is a huge adaptation, but once you are used to it, it's fun to use, and to make quick prototyping, but similarily good for more complex programs, though some more "have-tos or best practises" could be in place, but this is anyhow a fairly new language

Icepickle Over a year ago

@MrColes I updated the post with some more info found on the documentation website, please note that even React doesn't really use one standard way, but I added the code with reference to the site itself for more information

Dexygen Over a year ago

@Icepickle appreciate your efforts but React is not a language. It is so different from other Javascript frameworks with their built-in two way binding. And setState being asynchronous? Ugh.

Icepickle Over a year ago

@GeorgeJempty true, framework would be a better description from my side 😊 I thought wtf aswell when first working with it but after working a while longer with it, I do like it

|

qwertzguy · Accepted Answer · 2020-02-19 08:10:08Z

3

For HOCs: you can use WrappedComponent.name

answered Feb 19, 2020 at 8:10

qwertzguy

18.3k11 gold badges70 silver badges72 bronze badges

Comments

radzserg · Accepted Answer · 2021-05-14 09:20:58Z

2

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);
}

answered May 14, 2021 at 9:20

radzserg

1,4061 gold badge15 silver badges23 bronze badges

2 Comments

Emeka Orji Over a year ago

This was my right answer. Everyone talking about class components, how about functional components. Getting the 'children name' works in development mode, but not after build, Doing it the way it's done in this answer makes .componentName accessible in the type object in production mode. Like so children.type.componentName

ChumiestBucket Over a year ago

sorry if this is out of context, but you can just use component.name. no need to set componentName, you already get that for free.

David Antoon · Accepted Answer · 2019-03-14 17:33:25Z

-1

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

answered Mar 14, 2019 at 17:33

David Antoon

8236 silver badges18 bronze badges

2 Comments

Tibor Szasz Over a year ago

I don't think it's safe to use any framework variable that starts with underscore or has 'internal' in it.

jperl Over a year ago

Indeed. Why? Because it's liable to change without you knowing it (you're not supposed to use it, so why would they warn you).

Shubham Khatri · Accepted Answer · 2019-06-15 11:27:33Z

-4

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.

edited Jun 15, 2019 at 11:27

answered May 5, 2017 at 9:10

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Arjun Nayak Over a year ago

Component.displayName is undefined for me. Hence I use Component.name. Seams to give me what I want.

Collectives™ on Stack Overflow

Get component name in React

6 Answers 6

Class Components

Functional Components

14 Comments

8 Comments

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Class Components

Functional Components

14 Comments

8 Comments

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related