Make wrapper component in React - reactjs

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>
)
}