CODEWITHSUNDEEP
javascriptreactjs
morne
morne

Reputation: 4189

can you pass a component through props to children

can you pass a component through props to children

var TaskForm = require('../../../../components/assessment/tasks/TaskForm.react');

render: function() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-12 col-lg-12">
                    <GroupsItemsAccordionWrapper
                         TaskForm=TaskForm
                    />
                </div>
            </div>
        </div>
    );
}

Upvotes: 1

Views: 82

Answers (2)

Aaleks
Aaleks

Reputation: 4343

You can do this like that :

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

// create you component 

var comp = <Hello name="World" />
ReactDOM.render(<DivWrapper child={ comp }/>, document.body);

And use { this.props.child } to render the component

JSFiddle here : https://jsfiddle.net/5c4gg66a/

Upvotes: 2

Pavlo
Pavlo

Reputation: 44927

Yes, you can pass any value as a prop, including an object returned by React.createClass (aka component class). Assuming you are implementing dependency injection:

var TaskForm = React.createClass({
  render: function() {
    return (
        <div>{this.props.children}</div>
    );
  }
});

var GroupsItemsAccordionWrapper = React.createClass({
  render: function() {
    var TaskForm = this.props.TaskForm;
    return (
        <div>
          <TaskForm>Hello, world!</TaskForm>
        </div>
    );
  }
});

ReactDOM.render(
  <GroupsItemsAccordionWrapper TaskForm={TaskForm} />,
  document.getElementById('container')
);

(Note the curly brackets around TaskForm={TaskForm}).

Demo: https://jsfiddle.net/69z2wepo/37477/

Upvotes: 2

Related Questions