how to conditional import and render?

[zilahir]

Hey!

I have the following component rendering in a loop:

<ListItem isBeta={menuItem.isBeta} key={menuItem.id} title={menuItem.title} id={menuItem.id} icon={menuItem.icon} />

the menuItem.icon is returned by an API.

Let's assume that props.icon = "home"

Then, in the definition of ListItem component i have the following:

.
.
import { home } from 'react-icons-kit/fa/home'; 
return (  
        <li key={props.id} className={isBetaClass}>
            <Icon icon={props.icon} />
            {props.title}
        </li>
    );

but this is not working, i can't render the ion based on a received props. Any idea how to do this?

thanks!

[wmira]

@zilahir create a map of key and icon e.g.

import { home } from 'react-icons-kit/fa/home';
import { another } from 'react-icons-kit/fa/another';
const ICONS = {
  home: home,
  someKey: another
}
return (  
        <li key={props.id} className={isBetaClass}>
            <Icon icon={ICONS[props.icon]} />
            {props.title}
        </li>
    );

[wmira]

Closing this now