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?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.