# React, how to dynamically choose a component to render

> Learn how to dynamically choose which React component to render, from React.createElement and an object lookup to just passing the component itself as a value.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-07-10 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-dynamically-render-component/

I had the need to render a list of items in a menu, each with its own icon.

I initially hardcoded the component in a menu, like this:

```jsx
const menu = [
  {
    title: 'Home',
    icon: <HomeIcon className="mr-3 ml-1 h-5 w-5" /> 
  },
  { title: 'Notifications', icon: <BellIcon className="mr-3 ml-1 h-5 w-5" /> },
  { title: 'Profile', icon: <UserIcon className="mr-3 ml-1 h-5 w-5" /> },
]
```

using the very cool `@heroicons/react` package.

In the JSX I iterated on the `menu` array to show `{item.icon}`

But then I had to change the Tailwind classes I was using depending on the responsive state of the app, for which I used the `react-responsive` package.

I decided to pass a string instead, so I first did this:

```js
const menu = [
  { title: 'Home', icon: 'HomeIcon' },
  { title: 'Notifications', icon: 'BellIcon' },
  { title: 'Profile', icon: 'UserIcon' },
]

const Icon = (props) => {
  const { name } = props

  let icon = null
  if (name === 'HomeIcon') icon = HomeIcon
  if (name === 'BellIcon') icon = BellIcon
  if (name === 'UserIcon') icon = UserIcon

  return React.createElement(icon, { ...props })
}

...

<Icon name={item.icon} />
```

Another possible solution would be to use an object to look up the components, instead of a bunch of `if` checks:

```js
const icons = {
  HomeIcon,
  BellIcon,
  UserIcon,
}

const Icon = (props) => {
  const { name } = props

  const TheIcon = icons[name]
  return <TheIcon {...props} />
}

<Icon name={item.icon} />
```

> I had to use `TheIcon` as [React](https://flaviocopes.com/react/) components start with an uppercase letter by convention.

This was good enough, but I then realized I could do it in a much simpler way by using the actual component instead of a string in the `menu` array:

```js
const menu = [
  { title: 'Home', icon: HomeIcon },
  { title: 'Notifications', icon: BellIcon },
  { title: 'Profile', icon: UserIcon },
]

const Icon = (props) => {
  const { icon } = props
  const TheIcon = icon
  return <TheIcon {...props} />
}

...

<Icon icon={item.icon} />
```