React JSX Dynamic Component Name

Question

I am trying to dynamically render components based on their type     For example     var type    Example    var ComponentName   type    Component    return  lt ComponentName   gt        Returns  lt examplecomponent   gt   instead of  lt ExampleComponent   gt       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  lt ExampleComponent   gt         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

User · Answer

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

User · Answer

lt MyComponent   gt  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  lt MyComponent   gt     compiles to  var MyComponent   Components type    Component    return React createElement MyComponent

User · Answer

If your components are global you can simply do   x000D   x000D  var nameOfComponent    SomeComponent   x000D  React createElement window nameOfComponent        x000D   x000D   x000D

User · Answer

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  lt SpecificStory  gt

User · Answer

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   lt AComponent   gt     console   lt BComponent   gt     const View    props    gt      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          lt Router gt           lt div gt             lt Route path     component  View   gt           lt  div gt         lt  Router gt                export default ViewManager  ReactDOM render  lt ViewManager   gt   document getElementById  root

User · Answer

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

User · Answer

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  lt Component1     this props      customProps    gt        case  Component2   return  lt Component2     this props      customProps    gt        case  component3   return  lt component3     this props      customProps    gt

User · Answer

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    lt DynamicComponent  gt     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    lt DynamicComponent  gt     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   gt       Bar displayName    Bar    export default dynamic Bar     The use of non-standard displayName instead of random property also benefits debugging

User · Answer

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  lt components props storyType  story  props story    gt       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  lt SpecificStory story  props story    gt

User · Answer

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         lt Compo someProp  someValue    gt    With flag Compo fill with one of ComponentOne or ComponentTwo and then the Compo can act like a React Component

User · Answer

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

User · Answer

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      gt      const DynamicComponent   lazy      gt  import      componentName             return        lt Suspense fallback   lt div gt Loading    lt  div gt   gt         lt ComponentName     props    gt       lt  Suspense gt           This approach makes some assumptions about the file hierarchy of course and can make the code easy to break

User · Answer

Edit  Other answers are better  see comments   I solved the same problem this way       render   function        var componentToRender    component1Name     var componentLookup         component1Name     lt Component1   gt        component2Name     lt Component2   gt                   return   lt div gt       componentLookup componentToRender      lt  div gt

[javascript] React / JSX Dynamic Component Name

Examples related to javascript

Examples related to reactjs

Examples related to react-jsx

Examples related to higher-order-components