CODEWITHSUNDEEP
meteorreactjs
Kavish Patel
Kavish Patel

Reputation: 9

Render variable component name in reactjs

I am working on a Meteor + React project. Excuse me for sounding a little noob here, but I need some help with calling a React component dynamically. For instance, I have three components <ComponentA />, <ComponentB /> and <ComponentC />. However, I want to render them dynamically;

var comp = /*some function that brings a string here*/; // this variable 'comp' could 
//be either of the ComponentA, ComponentB and ComponentC.

What is the best way to render this comp variable as a react component?

Following is how the system should work: 

if (Meteor.isClient) {
    WelcomeComponent = React.createClass({
        render() {
            return <div><h1>Hello, {this.props.name}</h1></div>
        }
    });

    GoodbyeComponent = React.createClass({
        render() {
            return <div><h1>Bye Bye, {this.props.name}</h1></div>
        }
    });

    MainLayout = React.createClass({
      render() {
        return <div>
          <header>
            This is our header
          </header>
          <main>
            {this.props.content}
          </main>
          <footer>
            This is our footer
          </footer>
        </div>
      }
    });
    if (login){
        var comp = 'WelcomeComponent';
    }else{
        var comp = 'GoodbyeComponent';
    }

    // I want above 'comp' variable to be used for rendering/loading/producing respective component

    ReactLayout.render(MainLayout, {content:<WelcomeComponent name="Kavish"/>})
    // ReactLayout.render(MainLayout, {content:<GoodbyeComponent name="Kavish"/>})
}

comp variable could either of the components' name in string format. Please advise how to call a function to load required component with using the variable comp.

Upvotes: 0

Views: 847

Answers (3)

Jeff Diederiks
Jeff Diederiks

Reputation: 1380

You can set a state variable in the constructor of the class and its parent:

if (typeof this.state == 'undefined') {
  this.state = {
    componentsToRender: <div></div>
  };
}

Then in the parent component, in the componentDidMount() function:

var componentsToRender = [];
if ([conditional]) {
  // some logic so you know which component to render
  componentsToRender.push(<customChildComponentToRender key={} />);
}
else {
  componentsToRender.push(<otherComponentToRender key={} />);
}
this.setState({
  componentsToRender: <div>{componentsToRender}</div>
});

Upvotes: 0

burak
burak

Reputation: 4064

React has createElement method to dynamically create an element. This method takes three parameters. type, props and children.

Here is abstraction:

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

Here is usage:

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
ReactDOM.render(root, document.getElementById('example'));

For detailed information visit: https://facebook.github.io/react/docs/top-level-api.html

Upvotes: 1

Guns
Guns

Reputation: 2728

You can get the className to render like:

var comp = this.props.type; // should be string
var actualComponent = window[comp];

Now if you are using ReactLayout use:

ReactLayout.render(actualComponent, {... your props here});

Upvotes: 0

Related Questions