Functional component name

I'm using:

• "react": "^18.2.0",
• "vite": "^4.1.0",

I need to know a component's name inside the component, or inside the module where the component is defined. The reason I need this is for debug purposes. I want to prefix my log messages with the component's name and I think that putting this manually is clumsy and non-portable.

I saw a lot of answers on SO that simply put do absolutely nothing, many of them referring to class components (because people can't read). One of these, however, refers to React's own documentation here. Granted, this comes under Class Properties, but the text clearly states that "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. ". Am I misreading this?

After hours trying to fix this, the unsuccessful attempts include:

• setting the name property: failed, because it's read only; also, its value is "".
• setting the displayName property: it's non-portable;
• trying the log function both inside and outside the component's function:

const log = (...a) => console.log(`[${<SOMETHING_THAT_WORKS_PLEASE>}]`, ...a)

As I said, the only thing that I could make work so far is replacing <SOMETHING_THAT_WORKS_PLEASE> with 'componentName'`, which again is really non-portable.

Is there any way to get this name?

Commencez par la documentation React Component liée dans l’issue et reproduisez la question avec React 18.2.0 et Vite 4.1.0, en vérifiant à la fois à l’intérieur et à l’extérieur d’un composant fonctionnel. C’est terminé lorsque la documentation explique clairement si le nom du composant est disponible dans ce contexte et quelles indications de débogage prises en charge s’appliquent.