DEV Community

Create react subcomponents in a simple way!

Yogini Bende on March 02, 2021

Hello Folks, If you are working in react and you have used libraries like React Bootstrap you must have seen or used components like <Dropdown.I...

Read full post

Harsh • Mar 2 '21

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;

// usage
<Card>
  <Card.Header>header</Card.Header>
  <Card.Body>body</Card.Body>
</Card>

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

Yogini Bende • Mar 4 '21

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

Gabriel Linassi • Jun 25 '21

Very nice, thanks. I was facing weird errors but realized I was exporting like

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

instead of

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

So make sure to follow the proper syntax. Besides, As @harshdand said, you don't need the React.Children part.

Alex Vechy • Mar 13 '21

Every time I see/need to build something like this, I think "wouldn't it be great if it was handled by the platform?". In the end, I always opt out for more permissive usage: document correct usage, but don't enforce it in code, just make sure it doesn't blow up if used incorrectly, while notiying the developer about it.

Yogini Bende • Mar 13 '21

Hey Lex, didn't get what you want to say here. Do you think this is not a good pattern? Will you please elaborate your comment?

Alex Vechy • Mar 13 '21

It's a totally valid approach, I'm just complaining on the browser capabilities to write custom components with "children" being handled automatically :)
Like, would be nice if we had not only

<select>
  <option value="1">First</option>
</select>

But also

<card>
  <header>Title</header>
</card>

that would handle incorrect children. I know web-components API exist and there are good examples of it, but it's far from being usable for smaller-scale projects.