0

I dynamically create an element based on passed ID:

const Icon: FC<IconPropsI> = ({iconId, ...rest}) => {
  const iconsMap: IconsMapT = {
    IconUser: IconUser,
    IconTime: IconTime,
    IconVideo: IconVideo
  }

  return createElement(iconsMap[iconId], rest)
}

Value of each map property has corresponding functional component.

I would like to avoid repeating myself. I have created a list of IDs instead. With the following array...

export const IconsIds: IconsIdsT = [ 'IconUser', 'IconTime', 'IconVideo', 'manymore...']

...how can I create the map dynamically inside the Icon component, so I don't have to write 200+ different icon IDs three times?

1 Answers1

1

In iconsMap you could also use property shorthand to not repeat yourself.

So instead of const iconsMap = { IconUser: IconUser } you should be able to do something like const iconsMap = { IconUser, ...otherIcons }

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions

Alternatively, there's a babel plugin that can compose all exports from a certain folder to a single object, and then you can get values from this object.

Check this answer

But please, be aware of potential issues - if you will pass wrong iconId, or if your bundler expects all imports being statically defined(AFAIK - at least react-native and expo expects that) - you might face issues with such an approach, and manual map typing might be more resilient solution.

Klimenko Kirill
  • 634
  • 2
  • 8
  • 22
  • Thank you for your reply Kirill. Maybe I should have been more precise when asking. The subcomponents (like `IconUser`) are functional components as well as `Icon` is. They are not imported as svgs. –  Nov 02 '21 at 22:53
  • Basically, with the array I'm creating a type to prevent mistakes when choosing the right icon and with that array I want to create the map too. I may be wrong but I don't see how your answer could help me. –  Nov 02 '21 at 23:00