React, how to dynamically choose a component to render

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

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:

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:

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:

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

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} />

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

Print Share Comment Cite Upload Translate Updates

APA

flaviocopes.com | Sciencx (2021-07-10T05:00:00+00:00) React, how to dynamically choose a component to render. Retrieved from https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/

MLA

" » React, how to dynamically choose a component to render." flaviocopes.com | Sciencx - Saturday July 10, 2021, https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/

HARVARD

flaviocopes.com | Sciencx Saturday July 10, 2021 » React, how to dynamically choose a component to render., viewed ,<https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/>

VANCOUVER

flaviocopes.com | Sciencx - » React, how to dynamically choose a component to render. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/

CHICAGO

" » React, how to dynamically choose a component to render." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/

IEEE

" » React, how to dynamically choose a component to render." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/. [Accessed: ]

rf:citation

» React, how to dynamically choose a component to render | flaviocopes.com | Sciencx | https://www.scien.cx/2021/07/10/react-how-to-dynamically-choose-a-component-to-render/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts