Skip to content
Related Articles

Related Articles

Improve Article

React.js displayName

  • Last Updated : 31 Mar, 2021

The displayName string is used in debugging messages. It’s usually not necessary to set it explicitly because the name of the function or class that describes the component infers it. If you wish to show a different name for debugging purposes or when you build a higher-order component, you may want to set it specifically.

The displayName given by React is a highly recommended feature that greatly aids in unit testing and debugging. It also comes in handy when inspecting a part with React dev tools.

Creating React Application:

  • Step 1: Create a React application using the following command.

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command.



    cd foldername

Project Structure: It will look like the following.

Example:Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React from 'react';
import ReactDOM from 'react-dom';
  
const child_class = class Myclass {
  render() {
    return (
      <div></div>
    )
  }
}
  
child_class.displayName = "Kapil";
class App extends React.Component {
  
  render() {
    return (
      <div>
        <p> 
            displayName of child class is: 
            {child_class.displayName}
        </p>
      </div>
    )
  }
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :