ReactJS - children on specific place - reactjs

Question

I'm new to React and I'm building something like Card component from bootstrap. So what I want to achieve is create some component with Children components like , etc ...
Is there any way to tell React where to render component of specific type (according name of component itself for example) to be able to do something like:
<Card>
<CardHeader />
<CardBody />
...
</Card>
Thank you

Answer 1

You need to maintain state to render component on condition,
state={
cardHeader: true,
cardBody: true
}
Now you can render component on condition,
<Card>
{this.state.cardHeader && <CardHeader />}
{this.state.cardBody && <CardBody />}
...
</Card>
If you have button and onclick of that button you want card header to get disabled, you can do so,
<button onClick={this.hideCardHeader}>Hide Header</button>
hideCardHeader = () => {
this.setState({cardHeader:false})
}
Doing this you can tell react you don't want to display card header.
Note: You can render any component at any place. Where you place component at that place the component will get render.

Answer 2

Thank you for your answer :)
I was trying different approach and I came up with something like this. It's probably not final and It requires some "fine-tuning" but It seems to be what I was looking for.
class Card extends Component {
getParsedChildren = () => {
const children = this.props.children;
let header, body;
children.forEach((child) => {
switch(child.type) {
case CardHeader:
header = child
break;
case CardBody:
body = child
break;
default:
break;
}
})
return {header, body};
}
render() {
const {header, body} = this.getParsedChildren();
return (
<div className="card">
{header}
{body}
</div>
);
}
}
export default Card;
Is there anything wrong with the "design" ?
Thank you