CODEWITHSUNDEEP
javascriptreactjs
Sam
Sam

Reputation: 4395

React / JSX Dynamic Component Name

I am trying to dynamically render components based on their type.

For example:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

I tried the solution proposed here React/JSX dynamic component names

That gave me an error when compiling (using browserify for gulp). It expected XML where I was using an array syntax.

I could solve this by creating a method for every component:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

But that would mean a new method for every component I create. There must be a more elegant solution to this problem.

I am very open to suggestions.

EDIT: As pointed out by gmfvpereira these days there is an official documentation entry for this: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

Upvotes: 335

Views: 311332

Answers (17)

Bhav Bhela
Bhav Bhela

Reputation: 317

An alternative approach is to use a "box" for the component. E.g.:

export function Home() {
  return <p>My Home</p>
}
export function Gear() {
  return <p>My Gear</p>
}

function DynamicComponentBoxed({box}) {
  return (
    <>
      { /* You can use variables b/c var.prop will never conflict with HTML tags nor will they conflict with React Components. */}
      {<box.component/>}  
    </>
  )
}

export function App(props) {
  return (
    <div className='App'>
      <DynamicComponentBoxed box={{component: Home}}></DynamicComponentBoxed>
      <DynamicComponentBoxed box={{component: Gear}}></DynamicComponentBoxed>
    </div>
  );
}

This can be preferable in some cases - especially when trying to pass components around as props / args to other components / functions.

  1. It doesn't require a mapping of components you know beforehand - the caller imports what they want, and passes it through
  2. It demonstrates that you can have a variable that points to a component, but the variable itself isn't the actual component.

Upvotes: 0

4pie0
4pie0

Reputation: 29724

Say, your components are defined in Components.js:

import React from 'react';

class Foo extends React.Component {
    render () {
        return (
            <div>
                <p>Foo is best</p>
            </div>
        );
    }
}

class Bar extends React.Component {
    render () {
        return (
            <div>
                <p>Bar is Bar</p>
            </div>
        );
    }
}

export {
    Foo,
    Bar
};

You can import * as X from Y and all component classes will be put into a dictionary X. Then render them from string this way:

import React from 'react';
    
import * as componentClasses from './Components';

class App extends React.Component {
    render () {
        const componentClass = componentClasses['Foo']; /** 'Foo' or 'Bar' **/
        const component = React.createElement(componentClass, {});

        return (
            <div>
                <h1>Cool</h1>
                {component}
            </div>
        );
    }
}

export default App;

https://codesandbox.io/s/unruffled-maria-i8psmo?file=/src/App.js

Upvotes: 0

Kuza Grave
Kuza Grave

Reputation: 1574

👍 You can create a reusable component with a fallback component.

export const StringComponent = (Base, { name, Fallback = undefined, ...rest }) => {
    const Component = Base[name];

    // return fallback if the component doesn't exist
    if (!Component) return <Fallback/>

    return <Component {...rest}/>;
};

And call it like this:

import * as Pages from "../pages"

const routes = [
  {path: "/", element: "Home" },
  {path: "/about", element: "About" },
  {path: "*", element: "NotFound" },
]

export function App(){
  
  const Fallback = Pages.NotFound

  // render each route using a string as name
  return (
    <div>
      { 
        routes.map(page => 
          StringComponent(Pages, { name: page.element, Fallback }) 
        )
      }
    </div>
  )
}

OBS: Imported Pages needs to be something like this:

import Home from "./home"
import About from "./about"
import NotFound from "./not-found"

export { Home, About, NotFound }

Upvotes: 0

Carey
Carey

Reputation: 61

Assuming you are able to export * from components like so...

// src/components/index.js

export * from './Home'
export * from './Settings'
export * from './SiteList'

You can then re-import * into a new comps object, which can then be used to access your modules.

// src/components/DynamicLoader.js

import React from 'react'
import * as comps from 'components'

export default function ({component, defaultProps}) {
  const DynamicComponent = comps[component]

  return <DynamicComponent {...defaultProps} />
}

Just pass in a string value that identifies which component you want to paint, wherever you need to paint it.

<DynamicLoader component='Home' defaultProps={someProps} />

Upvotes: 1

jchapron
jchapron

Reputation: 321

With the introduction of React.lazy, we can now use a true dynamic approach to import the component and render it.

import React, { lazy, Suspense } from 'react';

const App = ({ componentName, ...props }) => {
  const DynamicComponent = lazy(() => import(`./${componentName}`));
    
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DynamicComponent {...props} />
    </Suspense>
  );
};

This approach makes some assumptions about the file hierarchy of course and can make the code easy to break.

Upvotes: 22

Arthur Z.
Arthur Z.

Reputation: 193

Having a map doesn't look good at all with a large amount of components. I'm actually surprised that no one has suggested something like this:

var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule);

This one has really helped me when I needed to render a pretty large amount of components loaded in a form of json array.

Upvotes: 5

Stalinko
Stalinko

Reputation: 3646

Across all options with component maps I haven't found the simplest way to define the map using ES6 short syntax:

import React from 'react'
import { PhotoStory, VideoStory } from './stories'

const components = {
    PhotoStory,
    VideoStory,
}

function Story(props) {
    //given that props.story contains 'PhotoStory' or 'VideoStory'
    const SpecificStory = components[props.story]
    return <SpecificStory/>
}

Upvotes: 14

AmerllicA
AmerllicA

Reputation: 32472

Assume we have a flag, no different from the state or props:

import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

With flag Compo fill with one of ComponentOne or ComponentTwo and then the Compo can act like a React Component.

Upvotes: 3

Estus Flask
Estus Flask

Reputation: 222309

There should be a container that maps component names to all components that are supposed to be used dynamically. Component classes should be registered in a container because in modular environment there's otherwise no single place where they could be accessed. Component classes cannot be identified by their names without specifying them explicitly because function name is minified in production.

Component map

It can be plain object:

class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;

Or Map instance:

const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);

Plain object is more suitable because it benefits from property shorthand.

Barrel module

A barrel module with named exports can act as such map:

// Foo.js
export class Foo extends React.Component { ... }

// dynamic-components.js
export * from './Foo';
export * from './Bar';

// some module that uses dynamic component
import * as componentsMap from './dynamic-components';

const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;

This works well with one class per module code style.

Decorator

Decorators can be used with class components for syntactic sugar, this still requires to specify class names explicitly and register them in a map:

const componentsMap = {};

function dynamic(Component) {
  if (!Component.displayName)
    throw new Error('no name');

  componentsMap[Component.displayName] = Component;

  return Component;
}

...

@dynamic
class Foo extends React.Component {
  static displayName = 'Foo'
  ...
}

A decorator can be used as higher-order component with functional components:

const Bar = props => ...;
Bar.displayName = 'Bar';

export default dynamic(Bar);

The use of non-standard displayName instead of random property also benefits debugging.

Upvotes: 39

p3nGu1nZz
p3nGu1nZz

Reputation: 1715

Suspose we wish to access various views with dynamic component loading.The following code gives a working example of how to accomplish this by using a string parsed from the search string of a url.

Lets assume we want to access a page 'snozberrys' with two unique views using these url paths:

'http://localhost:3000/snozberrys?aComponent'

and

'http://localhost:3000/snozberrys?bComponent'

we define our view's controller like this:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import AComponent from './AComponent.js';
import CoBComponent sole from './BComponent.js';

const views = {
  aComponent: <AComponent />,
  console: <BComponent />
}

const View = (props) => {
  let name = props.location.search.substr(1);
  let view = views[name];
  if(view == null) throw "View '" + name + "' is undefined";
  return view;
}

class ViewManager extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route path='/' component={View}/>
        </div>
      </Router>
    );
  }
}

export default ViewManager

ReactDOM.render(<ViewManager />, document.getElementById('root'));

Upvotes: 0

Hammad Akhwand
Hammad Akhwand

Reputation: 799

Edit: Other answers are better, see comments.

I solved the same problem this way:

...
render : function () {
  var componentToRender = 'component1Name';
  var componentLookup = {
    component1Name : (<Component1 />),
    component2Name : (<Component2 />),
    ...
  };
  return (<div>
    {componentLookup[componentToRender]}
  </div>);
}
...

Upvotes: -3

gmfvpereira
gmfvpereira

Reputation: 2864

There is an official documentation about how to handle such situations is available here: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

Basically it says:

Wrong:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Wrong! JSX type can't be an expression.
    return <components[props.storyType] story={props.story} />;
}

Correct:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Correct! JSX type can be a capitalized variable.
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}

Upvotes: 266

Ricardo Pedroni
Ricardo Pedroni

Reputation: 2060

For a wrapper component, a simple solution would be to just use React.createElement directly (using ES6).

import RaisedButton from 'mui/RaisedButton'
import FlatButton from 'mui/FlatButton'
import IconButton from 'mui/IconButton'

class Button extends React.Component {
  render() {
    const { type, ...props } = this.props

    let button = null
    switch (type) {
      case 'flat': button = FlatButton
      break
      case 'icon': button = IconButton
      break
      default: button = RaisedButton
      break
    }

    return (
      React.createElement(button, { ...props, disableTouchRipple: true, disableFocusRipple: true })
    )
  }
}

Upvotes: 13

abhirathore2006
abhirathore2006

Reputation: 3745

I used a bit different Approach, as we always know our actual components so i thought to apply switch case. Also total no of component were around 7-8 in my case.

getSubComponent(name) {
    let customProps = {
       "prop1" :"",
       "prop2":"",
       "prop3":"",
       "prop4":""
    }

    switch (name) {
      case "Component1": return <Component1 {...this.props} {...customProps} />
      case "Component2": return <Component2 {...this.props} {...customProps} />
      case "component3": return <component3 {...this.props} {...customProps} />

    }
  }

Upvotes: -3

Ray
Ray

Reputation: 2738

If your components are global you can simply do: 

var nameOfComponent = "SomeComponent";
React.createElement(window[nameOfComponent], {});

Upvotes: 8

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36408

<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, {});

Upvotes: 291

Sam
Sam

Reputation: 4395

I figured out a new solution. Do note that I am using ES6 modules so I am requiring the class. You could also define a new React class instead.

var components = {
    example: React.createFactory( require('./ExampleComponent') )
};

var type = "example";

newComponent() {
    return components[type]({ attribute: "value" });
}

Upvotes: 12

Related Questions