My question is pretty simple : I have some ugly repetitive React imports and rendering code, and couldn’t find a way to make it clean so I am hoping someone already encountered this problem and might know a better solution…
Here is the component I’m trying to make more dynamic :
import { InfoIcon } from '../assets/InfoIcon'
import { DemandsIcon } from '../assets/DemandsIcon'
import { HomeIcon } from '../assets/HomeIcon'
import { MyWorkIcon } from '../assets/MyWorkIcon'
import { PortfoliosIcon } from '../assets/PortfoliosIcon'
import { ProjectsIcon } from '../assets/ProjectsIcon'
export const ModuleIcon = ({ iconName }) => {
switch (iconName) {
case 'home':
return <HomeIcon />
case 'myWork':
return <MyWorkIcon />
case 'projects':
return <ProjectsIcon />
case 'portfolios':
return <PortfoliosIcon />
case 'demands':
return <DemandsIcon />
default:
return <InfoIcon />
}
}
Here, all the components I am importing are just a component that return an
If you need more info, I am available 🙂
I didn’t find any other solution as I just don’t understand how to import according to a string given in props