How to Render Component Dynamically in React - reactjs

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"));?