/

How to Dynamically Choose a Component to Render in React

How to Dynamically Choose a Component to Render in React

When working on a menu that displays a list of items, each with its own icon, you may come across the need to dynamically choose which component to render based on certain conditions. In this blog post, we’ll explore different approaches to achieve this in React.

Hardcoding Components in the Menu

Initially, you might hardcode the components directly in the menu array. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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" />
  }
];

This approach works well if the components remain the same throughout the application.

Using a String to Reference Components

However, if you need to change the Tailwind classes based on the responsive state of the app, you might consider using a string to reference the components instead. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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} />;

This allows you to dynamically choose the component based on the string value. However, it involves multiple if checks.

Using an Object to Look up Components

Alternatively, you can use an object to look up the components instead of using multiple if checks. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const icons = {
  HomeIcon,
  BellIcon,
  UserIcon
};

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

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

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

Using an object simplifies the code and allows for easier component lookups. However, remember that React components should start with an uppercase letter according to convention.

Simplifying the Menu Array

Finally, you can simplify the code even further by using the actual component instead of a string in the menu array. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
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 approach allows you to directly use the component name without referencing it through a string or an object.

In conclusion, there are multiple ways to dynamically choose a component to render in React. Depending on the needs of your application, you can choose the approach that best suits your requirements.

tags: [“React”, “component rendering”, “dynamic rendering”, “JSX”, “Tailwind”, “responsive state”, “component lookup”]