how to set displayName in a functional component [React]

by

The docs for displayName say

The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see Wrap the Display Name for Easy Debugging for details.

In your case, you would simply use

const MyComponent = (props) => { ... }

MyComponent.displayName="HeyHey"

Or you can use Object.assign

const MyComponent =
  Object.assign
    ( props => { ... }
    , { displayName: 'HeyHey' }
    )

More Related Contents:

  1. Why is immutability so important (or needed) in JavaScript?
  2. Difference between declarative and imperative in React.js?
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. Why do we need middleware for async flow in Redux?
  5. Make React useEffect hook not run on initial render
  6. Push method in React Hooks (useState)?
  7. Rendering raw html with reactjs
  8. Correct way to handle conditional styling in React
  9. Intercept/handle browser’s back button in React-router?
  10. Is it possible to share states between components using the useState() hook in React?
  11. react router doesn’t work in aws s3 bucket
  12. Multiple path names for a same component in React Router
  13. How do you send images to node js with Axios?
  14. React useState hook event handler using initial state
  15. Why IE 11 display blank page rendering react app
  16. Unable to use Arrow functions inside React component class [duplicate]
  17. How to disable button in React.js
  18. how to listen for route change in react-router-dom v6
  19. How to use create-react-app with an older React version?
  20. How can I use Jest to spy on a method call?
  21. useEffect is running twice on mount in React
  22. Split JavaScript array in chunks using Lodash
  23. React – useState – why setTimeout function does not have latest state value?
  24. How to create a protected route with react-router-dom?
  25. “You may need an additional loader to handle the result of these loaders.”
  26. using css modules how do I define more than one style name
  27. Dynamically Rendering a React component
  28. Could not find “store” in either the context or props of “Connect(App)”
  29. Function inside functional component in React hooks – Performance
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment