0

I have imported a number of files containing components (each of them is a different vector shape)

There's one file per shape. Each file is called differently, eg: Circle.js, DarkStar.js, etc but each of them has a default export:

export default SvGElement;

All of them have exactly the same last line as above. I import all of them to another component using their aliases from filenames, eg:

import Circle from './Circle';
import DarkStar from './DarkStar';

I'm trying to render them all with descriptions. I'm fine with rendering them but I cannot access their names (eg. 'Circle', 'DarkStar', etc.)

Circle.name returns the 'SvgElement' string

Circle.toString() - returns the content of the component function

How would I go about capturing the name Circle, DarkStar to variables. I cannot change anything in the vector files (only in the file I'm importing them to)

Wasteland
  • 4,889
  • 14
  • 45
  • 91
  • I'm confused. You have a variable, and you want to know the name of the variable? – Heretic Monkey Apr 12 '21 at 21:52
  • Does this answer your question? [Variable name as a string in Javascript](https://stackoverflow.com/questions/4602141/variable-name-as-a-string-in-javascript) – Heretic Monkey Apr 12 '21 at 21:53
  • You have to spell them out yourself, but you can cheat: `for (const [name, element] of Object.entries({Circle, DarkStar, …}))` – Bergi Apr 12 '21 at 21:58
  • As they are react component try `Circle.displayName || Circle.name`, but maybe for functional component (and mnified prod bundle) you have to set it `Circle.displayName = "MyCircleComponent"` in Circle.js – Miroslav Papírník Apr 13 '21 at 10:43
  • Otherwise you cannot rely on file names or exported constant names as they can differ in optimized, uglified production build. – Miroslav Papírník Apr 13 '21 at 10:49

0 Answers0