Dynamically adding components in react

Question

I need to add components by rendering it in react:

<componentName ..... />

However, the name of component is not known and coming from a variable. How I can render that?

Refer to this answer stackoverflow.com/questions/36941829/… — Saman
– Saman, Commented Sep 15, 2017 at 5:26

Anuj · Accepted Answer · 2017-07-10 20:18:10Z

7

You will need to store references to the dynamic components:

import ComponentName from 'component-name'

class App extends Component {
    constructor(props) {
        super(props)

        this.components = {
            'dynamic-component': ComponentName
        }
    }

    render() {
      // notice capitalization of the variable - this is important!
      const Name = this.components[this.props.componentName];

      return (
        <div>
          <Name />
        </div>
      )
    }
};

render(<App componentName={ 'dynamic-component' } />, document.getElementById('root'));

See the react docs for more info.

answered Jul 10, 2017 at 20:18

Anuj

1,47412 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chrismacp Over a year ago

Thanks for the link to the official docs about it, missed that!

harrygogonis · Accepted Answer · 2017-07-10 20:48:12Z

3

You can create a file that exports all the different components

// Components.js
export Foo from './Foo'
export Bar from './Bar'

then import them all

import * as Components from './Components'

then you can dynamically create them based on a variable/prop:

render() {
  // this.props.type = 'Foo'
  // renders a Foo component
  const Component = Components[this.props.type];
  return Component && <Component />;
}

answered Jul 10, 2017 at 20:48

harrygogonis

1093 bronze badges

Comments

Selina · Accepted Answer · 2017-07-12 17:11:26Z

0

Okay, for me this worked:

import {Hello} from 'ui-hello-world';

let components = {};

components['Hello'] = Hello;
export default components;

and then in my class: import customComps from '.....json'; .... let Component = Custom.default[customComps.componentName];

      return (
        <Component

answered Jul 12, 2017 at 17:11

Selina

1531 gold badge3 silver badges14 bronze badges

Collectives™ on Stack Overflow

Dynamically adding components in react

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related