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;