Use Dynamic Component Names in React

As a React developer, I’ve often faced scenarios where I needed to render components dynamically based on user input, API data, or other runtime conditions. React’s component-based architecture is powerful, but sometimes you want to take it a step further by dynamically selecting which component to render without hardcoding each possibility.

In this article, I’ll share my firsthand experience on how to handle dynamic component names in React. Whether you’re building dashboards, admin panels, or any app requiring flexible UI rendering, these methods will help you write cleaner, more maintainable code.

Table of Contents

What Does Dynamic Component Name Mean in React?

When you write JSX like <MyComponent />, React expects MyComponent to be a component function or class. Normally, you import or define your components and use them directly. But what if you want to decide which component to render at runtime, based on a variable?

Dynamic component rendering means you can store component references in variables or objects and render them conditionally. This is especially useful when you have multiple components that share similar props or UI patterns, and you want to switch between them without writing repetitive code.

Method 1: Use a Component Map Object

One of the simplest and most reliable ways to render components dynamically is by creating a map (object) linking component names (strings) to the actual component functions. This lets you access and render components based on a key.

Here’s how I usually do it:

import React from "react";

// Define some sample components
const SalesChart = () => <div>Sales Chart Component</div>;
const UserProfile = () => <div>User Profile Component</div>;
const Dashboard = () => <div>Dashboard Component</div>;

// Map component names to components
const componentMap = {
  sales: SalesChart,
  profile: UserProfile,
  dashboard: Dashboard,
};

const DynamicComponentRenderer = ({ componentName }) => {
  // Select the component based on the name
  const ComponentToRender = componentMap[componentName];

  // If component doesn't exist, render fallback UI
  if (!ComponentToRender) {
    return <div>Component not found.</div>;
  }

  // Render the dynamic component
  return <ComponentToRender />;
};

// Example usage
export default function App() {
  const [currentComponent, setCurrentComponent] = React.useState("dashboard");

  return (
    <div>
      <h1>Dynamic Component Rendering Example</h1>
      <button onClick={() => setCurrentComponent("sales")}>Sales Chart</button>
      <button onClick={() => setCurrentComponent("profile")}>User Profile</button>
      <button onClick={() => setCurrentComponent("dashboard")}>Dashboard</button>

      <div style={{ marginTop: "20px" }}>
        <DynamicComponentRenderer componentName={currentComponent} />
      </div>
    </div>
  );
}

I executed the above example code and added the screenshot below.

The componentMap object acts like a registry.
You avoid using eval or unsafe methods.
It’s easy to add or remove components.
You get full IntelliSense support in editors like VSCode.

This method is my go-to for most dynamic rendering needs because it’s simple and explicit.

Method 2: Use React.createElement with Dynamic Component Reference

Sometimes, you might want to dynamically create components without JSX. React’s createElement function can be used for this.

Here’s how:

import React from "react";

const components = {
  SalesChart: () => <div>Sales Chart Component</div>,
  UserProfile: () => <div>User Profile Component</div>,
  Dashboard: () => <div>Dashboard Component</div>,
};

const DynamicComponent = ({ componentName }) => {
  const Component = components[componentName];

  if (!Component) {
    return <div>Component not found</div>;
  }

  // Using React.createElement instead of JSX
  return React.createElement(Component);
};

export default function App() {
  const [componentName, setComponentName] = React.useState("Dashboard");

  return (
    <div>
      <h2>Dynamic component with React.createElement</h2>
      <select onChange={(e) => setComponentName(e.target.value)} value={componentName}>
        <option value="SalesChart">Sales Chart</option>
        <option value="UserProfile">User Profile</option>
        <option value="Dashboard">Dashboard</option>
      </select>

      <div style={{ marginTop: 15 }}>
        <DynamicComponent componentName={componentName} />
      </div>
    </div>
  );
}

I executed the above example code and added the screenshot below.

This approach is beneficial when you want to avoid JSX or dynamically generate components in non-UI logic.

Method 3: Dynamic Import with React.lazy for Code Splitting

If your components are large or you want to optimize load time, dynamic imports with React.lazy and Suspense are great.

Here’s an example:

import React, { Suspense, useState } from "react";

const componentImports = {
  SalesChart: React.lazy(() => import("./SalesChart")),
  UserProfile: React.lazy(() => import("./UserProfile")),
  Dashboard: React.lazy(() => import("./Dashboard")),
};

const DynamicLazyComponent = ({ componentName }) => {
  const Component = componentImports[componentName];

  if (!Component) {
    return <div>Component not found</div>;
  }

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Component />
    </Suspense>
  );
};

export default function App() {
  const [componentName, setComponentName] = useState("Dashboard");

  return (
    <div>
      <h2>Dynamic import with React.lazy</h2>
      <select onChange={(e) => setComponentName(e.target.value)} value={componentName}>
        <option value="SalesChart">Sales Chart</option>
        <option value="UserProfile">User Profile</option>
        <option value="Dashboard">Dashboard</option>
      </select>

      <div style={{ marginTop: 15 }}>
        <DynamicLazyComponent componentName={componentName} />
      </div>
    </div>
  );
}

I executed the above example code and added the screenshot below.

When components are large or rarely used.
To improve initial load performance.
To keep your bundle size smaller.

Common Pitfalls and Tips

Component Names Must Start with Uppercase: React treats lowercase tags as DOM elements, so your dynamic component references must be uppercase.
Fallback UI: Always handle cases where the component name does not exist to avoid runtime errors.
Props Passing: You can pass props dynamically to your components by spreading them: <ComponentToRender {…props} />.
Avoid Using Strings Directly in JSX: Don’t try to render strings as component names like <“SalesChart” /> — React will throw an error.

With these methods, you can build flexible and reusable React applications that dynamically adapt to your data and user interactions. Whether you want a quick map-based solution or a scalable lazy loading setup, dynamic component names are a powerful tool in your React toolkit.

If you want to explore more about React component patterns or need help with optimizing your React app, feel free to ask!