React/Jsx Dynamic Component Name

React / JSX Dynamic Component Name

<MyComponent /> compiles to React.createElement(MyComponent, {}), which expects a string (HTML tag) or a function (ReactClass) as first parameter.

You could just store your component class in a variable with a name that starts with an uppercase letter. See HTML tags vs React Components.

var MyComponent = Components[type + "Component"];
return <MyComponent />;

compiles to

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

ReactJS - Dynamic Component Name with closing tag and children elements

Absolutely there is a way to dynamically set the component at runtime.

Choosing the Type at Runtime

Create a component map object to hold references to the imported components

const components = {
  PrivateLayout,
  PublicLayout
};

And then do something similar to what you tried by using the connected value to look up in the map the component to assign to the wrapper.

export default function Home() {
  const connected = false;
  const Layout = connected ? components.PublicLayout : components.PrivateLayout;

  return (
    <Layout>
      {/*here are my child components*/}
    </Layout>
  );
}

Dynamic tag name in React JSX

No way to do that in-place, just put it in a variable (with first letter capitalised):

const CustomTag = `h${this.props.level}`;

<CustomTag>Hello</CustomTag>

React/JSX dynamic component names

JSX is just a nice syntax for function calls, so you need to have the actual functions to use a component. If you have an object that contains React components then you can render a component based on a string property. For example if you have an object called MyComponents (has to be uppercase for JSX) and that object has React components like MyComponents.SomeInput = React.CreateClass(...). Then you can use <MyComponents.SomeInput /> in your JSX.

React, how to make the component name used dynamic?

Pretend your Button that you import is just an object that looks like this:

const Button = {
    Primary: () => return some jsx
    Secondary: () => return some jsx
}

So if you want to render the secondary button you can do:

  <Button.Secondary>

  // or
  const Cmp = Button.Secondary;
  return <Cmp/>

  // or
  const Cmp = Button['Secondary'];
  return <Cmp/>

extrapolating:

import { Button } from 'somewhere'

const YourCmp = ({isScrolled}) => {

   const Cmp = Button[isScrolled ? 'Secondary' : 'Primary'];
   return <Cmp {...yourProps}><SomeChild/></Cmp>

}

Dynamically rendering component from string: ReactJS

Yes you can call the component dynamically, but it should be the component itself not the string.

Like this:

var Tagname = Species;    //component itself, not string
<Tagname {...attrs}/>;

Because JSX will get compiles into React.createElement(Component, props, ...children) and Component will be a string if it a html tag, otherwise a react component.

So if you pass React.createElement("Species", props, ...children), react will treat it as a html tag not a react component.

Update:

You can do one thing, create a map for each component, Like this:

const Map = {
  "componenet1": Component1,
  "componenet2": Component2
}

Now you can access the component using the string key, like this:

let name = "componenet1";
let Tagname = Map[name];
<Tagname {...attrs}/>;

React Dynamic Component Naming

https://github.com/vasanthk/react-bits/blob/master/patterns/30.component-switch.md

import HomePage from './HomePage.jsx';
import AboutPage from './AboutPage.jsx';
import UserPage from './UserPage.jsx';
import FourOhFourPage from './FourOhFourPage.jsx';

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;

  return <Handler {...props} />
};

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
};

---

Related Topics