How to Render Component Dynamically in React

Question

I have developed a Component base application in which I have developed a different Component but at time of rendering I have to render based on user action currently what I have tried is mentioned below.

My Component looks like:

 var React = require('react');
var Constants = require('../constants/ActionTypes');
var ItemRelationStore = require('../stores/ItemRelationStore');
var ItemStore=require('../stores/ItemStore');
var TreeView=require('./TreeView.react');


var childNodes={};

function getItemRelationState() {

    return {

        Items:JSON.parse(JSON.stringify(ItemStore.getItem())),
        Items1:JSON.parse(JSON.stringify(ItemStore.getItem1()))


    };
}
// Define main Controller View
var ItemPage = React.createClass({
    // Get initial state from stores
    getInitialState: function() {
        return getItemRelationState();
    },

    // Add change listeners to stores
    componentDidMount: function() {


        ItemStore.CallItem("TenantId",this.props.MetaItemId,this.props.Key);

        ItemStore.addChangeListener(this._onChange);
    },

    // Remove change listers from stores
    componentWillUnmount: function() {
        ItemStore.removeChangeListener(this._onChange);
    },

    // Render our child components, passing state via props
    render: function() {
        var itemslist;
        if(this.props.Key==1)
        {
            itemslist=this.state.Items;
        }
        else
        {
            itemslist=this.state.Items1;
        }
        var metaid=this.props.MetaItemId;
        childNodes= Object.keys(itemslist).map(function(item,index){
            return (
          {

              title:itemslist[item].Name,
              Id: itemslist[item].Id,
              metaitemId:metaid

          }
            )
        });

        var tree= {
            title: this.props.MetaItemName,
            metaitemId:metaid,
            childNodes: [
             {childNodes}
            ]
        };
        return (

              <div className="treeview">
                 <TreeView  node={tree}/>
              </div>

         );
    },

    // Method to setState based upon Store changes
    _onChange: function() {

        this.setState(getItemRelationState());
    }
});

module.exports = ItemPage;

Now when I used static in another component like

var Item=require('../../Item');
 React.render(<Item MetaItemName={"Users"} MetaItemId={1} Key={1}/>,document.getElementById("firstCol"));

then it's working fine. but I want to render dynamically so I have prepared one CustomeComponent like

var React = require('react');
var Item=require('../Item');
var CustomComponent = React.createClass({
    // Get initial state from stores
    getInitialState: function() {
        return null;
    },

    // Add change listeners to stores
    componentDidMount: function() {

    },
    componentWillReceiveProps: function(nextProps) {
        // Load new data when the dataSource property changes.
        if (nextProps.dataSource != this.props.dataSource) {
            this.loadData(nextProps.dataSource);
        }
    },
    // Remove change listers from stores
    componentWillUnmount: function() {

    },

    // Render our child components, passing state via props
    render: function() {
        var InputType=this.props.inputType;
        console.log(InputType);
        return (

            <InputType/>

         );
    },

    // Method to setState based upon Store changes
    _onChange: function() {

    }
});

module.exports = CustomComponent;

and I am calling this custom component like

React.render(<CustomComponent inputType="Item" />,document.getElementById("secondCol"));

but it's not working i mean to say nothing render on Page.

I just want to know how we can Achive dynamic rendering in React.

Thanks in Advance.

Answer 1

Maybe React.render(<CustomComponent inputType={Item} />,document.getElementById("secondCol"));?