I've component wrapper for Bootstrap Panel:

var Panel = React.createClass({
    render: function () {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <div className="panel-title">
                        {this.props.title}
                    </div>
                </div>
                <div className="panel-body"></div>
            </div>
        );
    }
});

How to output to "panel-body" tag "h1" and component "AvailableActions" on example what you can see below?

var PlayerActions = React.createClass({
    render: function () {
        return (
            <Panel title="Actions">
                <h1>Some description here...</h1>
                <AvailableActions></AvailableActions>
            </Panel>
        );
    }
});

I've component wrapper for Bootstrap Panel:

var Panel = React.createClass({
    render: function () {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <div className="panel-title">
                        {this.props.title}
                    </div>
                </div>
                <div className="panel-body"></div>
            </div>
        );
    }
});

How to output to "panel-body" tag "h1" and component "AvailableActions" on example what you can see below?

var PlayerActions = React.createClass({
    render: function () {
        return (
            <Panel title="Actions">
                <h1>Some description here...</h1>
                <AvailableActions></AvailableActions>
            </Panel>
        );
    }
});

• javascript
• reactjs

2 Answers 2

Seems you need this.props.children

var Panel = React.createClass({
    render: function () {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <div className="panel-title">
                        {this.props.title}
                    </div>
                </div>
                <div className="panel-body">{ this.props.children }</div>
            </div>
        );
    }
});

Example

<div className="panel-body">
    {this.props.children}
</div>