Passing another component to a React Component - reactjs

Question

React newbie here.
I am trying to create a simple category tree which allows you to render a JSON structure as a tree. The role of this JSONView is to be aware of the JSON structure and split it down into hierarchical tree. And the nodes of the tree will be parsed according to a custom rendering logic, which can be injected into this panel.
This complies with Single Responsibility Principle in the sense that JSONView is responsible for parsing the data and render the view component at leaves. The view component takes care of the rendering logic. I was able to achieve this by making the view component as a child component of the JSONViewPanel here :
http://jsbin.com/tiwijilide/1/edit?js,output
But I would really like to achieve something like this :
let x = {
"category":["first","second","third","fourth"]
};
class JSONPanel extends React.Component{
constructor(props){
super(props);
}
render(){
let {data, ...x} = this.props;
let dataNodes = data.category.map((category) => {
x = Object.assign(x, {text:category});
return (
<li><Component {...x}/></li> //Component passed as props
)
});
return (
<ul>{dataNodes}</ul>
);
}
};
The intention is to pass in any subtype of React component to this JSONView.
Is it possible without making Node component children of sub component as its done in the JSBin link?

Answer 1

Yes it is possible: try it!
let x = {
"category":["first","second","third","fourth"]
};
class JSONPanel extends React.Component{
constructor(props){
super(props);
}
render(){
let {data, ...x} = this.props;
let Renderer = this.props.renderer.component;
let dataNodes = data.category.map((category,rank) => {
x = Object.assign(x, {text:category})
return (
<li key={rank}><Renderer {...this.props.renderer.props} {...x}/></li>
)
});
return (
<ul>{dataNodes}</ul>
);
}
};
class RenderNode extends React.Component{
render(){
return(
<span className={this.props.will}>{this.props.text}</span>
)
}
}
var renderer={
component:RenderNode,
props:{will:"color-text-green"}
}
React.render(<JSONPanel data={x} renderer={renderer}/>, document.getElementById("react-example"));
The component can be given as props and must be call through a string with a capital first letter.