Make wrapper component in React

Question

I am trying to make a component such that it holds another HTML element along with the React custom components. I created the component but it didn't work as I want. Currently, it didn't get rendered.

whole component structure

<AddingDetail>
                        <div className="row">
                            <DetailHeader link="/dashboard/setting" linkText="Back" heading="Add Role" />
                            <DetailBody>
                                <h1>Hello</h1>

                            </DetailBody>
                            <DetailFooter buttonText="Add" />
                        </div>
</AddingDetail>

AddingDetail component

render()
    {
        return(
            <div className="col-md-12 bg-white border-radius-10">
            </div>
        )
    }

DetailBody

render()
    {
        return(
            <div className="col-md-12">
            </div>
        )
    }

DetailHeader

return(
            <div className="col-md-12 mgb-30" style={border} >
            <div className="row" style={{marginBottom:'10px'}}>
            <div className="col-md-6 flex vertical-center">
                <h3 className="sub-heading roboto mgb-0">{this.props.heading}</h3>
            </div>
            <div className="col-md-6 align-right flex vertical-center flex-end">
                <Link to={this.props.link}>
                    <button type="button" className="golden-button">{this.props.linkText}}</button>
                </Link>
            </div>
            </div>
        </div>
        )

DetailFooter

return(
            <div className="col-md-12 align-center mgb-20 mgt-20">
                        <button type="button" className="golden-button">{this.props.buttonText}</button>
            </div>
        )

Answer 1

You can use props.children to show the content in AddingDetail :

render() {
    return(
        <div className="col-md-12 bg-white border-radius-10">
            { this.props.children } //<---- HERE
        </div>
    )
}

And the same change you can apply to DetailBody.

render() {
    return(
        <div className="col-md-12">
            { this.props.children }
        </div>
    )
}