DEV Community

Discussion on: Create react subcomponents in a simple way!

View post
Collapse
 
harshdand profile image
Harsh •

We can use something simple like this right?

const Card = ({ children }) => {
  return <div className="card">{children}</div>;
};

const Header = ({ children }) => {
  return <div className="card-header">{children}</div>;
};

const Body = ({ children }) => {
  return <div className="card-body">{children}</div>;
};

Card.Header = Header;
Card.Body = Body;
Enter fullscreen mode Exit fullscreen mode 
// usage
<Card>
  <Card.Header>header</Card.Header>
  <Card.Body>body</Card.Body>
</Card>
Enter fullscreen mode Exit fullscreen mode

Does using React.Children.map provide any advantage over this code?

Collapse
 
hey_yogini profile image
Yogini Bende •

This is simple and efficient if we know how many subcomponents we are adding. But if we do not want to keep adding these component and want them to get added inside card, then React.Children will be useful. But again, it really depends on what you feel more effective :)