Passing another component to a React Component

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?

I don't think I understand what you are trying to do. Can you clarify / elaborate more? — Felix Kling
– Felix Kling, Commented May 11, 2016 at 4:20
Edited the question to give more context. Let me know if you need more details. — tallandroid
– tallandroid, Commented May 11, 2016 at 6:30

Damien Leroux · Accepted Answer · 2016-05-11 07:03:46Z

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.

Collectives™ on Stack Overflow

Passing another component to a React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related