ReactJs: Dynamic component loading passing properties

Question

I have a library of ReactJS components, as the following code:

components.js

class Comp1 extends Component {

    render () {
        return (
            <div>Component 1 Text: {this.props.text}</div>
        );
    }
}

class Comp2 extends Component {

    render () {
        return (
            <div>Component 2 Text: {this.props.text}</div>
        );
    }

}

export components = {
    Comp1,
    Comp2
}

The main component needs to choose which one to render based on a passed property:

main.js

import { components } from './components';
    
class Main extends Component {
    
        getComponent = (name) =>  {
            return components[name];
        };
        
        render () {
        
            let comp = this.getComponent(this.props.componentName);
            
            return (
                <div>
                    <comp   <=== HOW TO CALL THE GIVEN COMPONENT PASSING ITS PROPERTY
                        text={'This is component' + this.props.componentName }
                    />
                </div>
            );
        }
    }


class App extends Component {
        render () {
        
            return (
                <div>
                    <Main componentName='Comp1' /> // Or 'Comp2'
                </div>
            );
        }
    }
}

I need in the main code to render the component and pass its properties, but I can´t make it work (see the comments on code). A simple {comp} renders the component, but I need to be able to pass its properties accordingly.

What I´ve tried:

{comp text={'This is component' + this.props.componentName}}
<comp text={'This is component' + this.props.componentName}/>

None of them worked.

How did you render the `App`? What is the value of `this.props.componentName`? — Dekel, Aug 26 '17 at 00:35
@Dekel, `this.props.componentName` is `Comp1` or `Comp2`. Updated the code with the initial render component. — Mendes, Aug 26 '17 at 01:09
@Mendes, Is `export components` working? And why just don't use ternary to check which component should be displayed? — Andrii Starusiev, Aug 26 '17 at 01:12
@Andrew, `export components` works fine. This is a simple example to get the feature working. My library will have dozens of components.... — Mendes, Aug 26 '17 at 01:14
@Mendes, have you tried `let Comp = this.getComponent(this.props.componentName);` and `` ? — Andrii Starusiev, Aug 26 '17 at 01:26
Possible duplicate of [React / JSX Dynamic Component Name](https://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name) — Mayank Shukla, Aug 27 '17 at 06:10

score 1 · Accepted Answer · answered Aug 26 '17 at 04:46

You component name need to begin with a UpperCase character. so it should look like

import { components } from './components';

class Main extends Component {

        getComponent = (name) =>  {
            return components[name];
        };

        render () {

            let Comp = this.getComponent(this.props.componentName);

            return (
                <div>
                    <Comp text={'This is component' + this.props.componentName }
                    />
                </div>
            );
        }
    }


class App extends Component {
        render () {

            return (
                <div>
                    <Main componentName='Comp1' /> // Or 'Comp2'
                </div>
            );
        }
    }
}

ReactJs: Dynamic component loading passing properties

1 Answers1