DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create react subcomponents in a simple way!

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

Collapse
 
gabrielmlinassi profile image
Gabriel Linassi

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

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

instead of

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

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

Collapse
 
lexswed profile image
Lex Swed

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.

Collapse
 
hey_yogini profile image
Yogini Bende

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?

Collapse
 
lexswed profile image
Lex Swed

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>
Enter fullscreen mode Exit fullscreen mode

But also

<card>
  <header>Title</header>
</card>
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
 
hey_yogini profile image
Yogini Bende

True that!

Collapse
 
chakudi profile image
Vaishali JS

Good stuff!
I only have basic knowledge of React but its interesting to see how you are using React.Children here.

Thanks and keep sharing πŸ‘

Collapse
 
hey_yogini profile image
Yogini Bende

Thanks Vaishali. Hope it have helped you in some way.

Collapse
 
rubenruvalcabac profile image
Ruben Ruvalcaba

Thank you! excellent article, just what I was looking for and didn't found

Collapse
 
matjones profile image
Mat Jones

Yeah, but try doing it in TypeScript without adding a virtually useless interface 😎

Collapse
 
ianwijma profile image
Ian Wijma

Not sure if I like this over additional exports. But definitely an concept. Thanks!

Collapse
 
paras594 profile image
Paras πŸ§™β€β™‚οΈ

This is interesting !!...Learned something new :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool interesting idea.

Collapse
 
mrnano profile image
Nano

thanks for writing this. as a suggestion an example of using the Card component will be useful.

Collapse
 
mrdulin profile image
official_dulin

Make the code less readable, meaningless logic. You can play it like this but you should avoid this.

Collapse
 
hey_yogini profile image
Yogini Bende

Thanks for reading the article. Would love to understand why we should avoid this?