Select a Dynamic Component in React

To render one of several components in React, map each allowed category to a component function, look up the selected function, and render it through an uppercase JSX variable. A category string such as "text" can choose a component, but building a component name as a string does not turn that string into a reference to a JavaScript variable.

Dynamic Component Names and JSX

JSX is syntax for describing UI, not a separate component lookup mechanism. In JSX, a lowercase name such as <section> denotes a built-in HTML element, while an uppercase identifier such as <SomeComponent /> refers to a JavaScript variable in scope. That variable must hold the component function or other supported component type.

JSX is transformed according to the project’s compiler settings. Some setups use React.createElement; others use a different runtime, so the exact generated calls depend on configuration. React.createElement is a function that can create a React element when given a supported element type and props.

Dynamic Component Name in React

Suppose a blog can show text, video, or picture content. Define those components first, then choose among their references. Concatenating a name produces only a string:

const SomeComponent = category + "Component";

For example, if category is "Text", SomeComponent becomes "TextComponent". JSX does not use that string to search JavaScript scope for a variable with the same name. A string can represent a built-in HTML tag in APIs that support string element types, but it does not resolve a custom component variable. Changing the string’s capitalization does not change its type or make it a component reference.

Correct Way to Have Dynamic Component Name in React

Create an explicit mapping from allowed category values to the already-defined components. Look up the selected reference, check that the category is supported, and render the reference using an uppercase JSX identifier:

This complete JavaScript example keeps the component choices in one allowlisted object. Each function returns a label so the selection flow can run in Node.js without a React build setup.

function TextComponent() {
  return "Text content";
}

function VideoComponent() {
  return "Video content";
}

function PictureComponent() {
  return "Picture content";
}

const componentByCategory = {
  text: TextComponent,
  video: VideoComponent,
  picture: PictureComponent
};

const category = "text";

if (Object.hasOwn(componentByCategory, category)) {
  const SelectedComponent = componentByCategory[category];
  console.log(SelectedComponent());
} else {
  console.log("Unsupported category");
}

Text content

In a React component, use the same own-key check before reading the mapping, then render the selected reference with JSX, for example, return <SelectedComponent />;. A category is supported only when it is an own key of componentByCategory; inherited names such as toString go to the fallback too. Choose what the interface should show, such as a fallback component or a message, instead of trying to render an absent reference. Keep this mapping as an allowlist: user input may select one of its defined entries, but it should not become an arbitrary component name or import path.

The supplied CodeSandbox example can be used to explore the original text, video, and picture component setup. In an application, replace the example category with the value selected by the user and retain the explicit mapping and fallback behavior.