DEV Community

Cover image for Create react subcomponents in a simple way!
Yogini Bende
Yogini Bende

Posted on • Updated on

Create react subcomponents in a simple way!

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.Item>. Have you ever wondered how to create such components?
In this article, we will understand creating components which have their own modules or subcomponents, just like above Dropdown component.

Note: If there is any particular name or jargon for subcomponents, please let me know that in comments below.

For this tutorial, we will be creating a very simple Card component. This will have Header, Body and Footer as its submodules. For the tutorial purpose, I am keeping this card component very simple and not adding any complex functionality to it. In the practical world, you may add all other features to it just like any other component in react. Though this tutorial is using plain ReactJS, you can use the same component structure for react-native apps as well.

The card component we will be creating will look something like this -
Card Component UI

Now, let's see the code first and understand its structure better. Below is the code we used to create the above component.




import React from 'react';

const Card = ({ children }) => {
    let subComponentList = Object.keys(Card);

    let subComponents = subComponentList.map((key) => {
        return React.Children.map(children, (child) =>
            child.type.name === key ? child : null
        );
    });

    return (
        <>
            <div className='card'>
                {subComponents.map((component) => component)}
            </div>
        </>
    );
};

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

const Body = (props) => <div className='card-body'>{props.children}</div>;
Card.Body = Body;

const Footer = (props) => <div className='card-footer'>{props.children}</div>;
Card.Footer = Footer;

export default Card;


Enter fullscreen mode Exit fullscreen mode

As you can see, in the above code, we are treating the card component as just another object is javascript. Our subcomponents, Header, Body and Footer are passed to the Card component as its keys.

Hence, inside the card, we will be first creating the list of all the keys i.e. subcomponents for the card. This way, we can add as many subcomponents as we want.

After getting the list of subcomponents, all we require is to render them through Card. Here, we will make use of React.Children api from React. React.Children provides a utility for dealing with opaque data structures the children props have. If, children prop is an array, it will return a function for each child in an array. If child is null or undefined, this method will return null or undefined.

The div element inside the return statement is used to add styling to the card and inside that div, we are just returning all the sub-components. We can also add more functionalities to this as per our requirements.

In this way, you can create any component with many subcomponents or modules inside it. Although, it is easy to create a single component and add all subcomponent functionalities inside it, but creating components this way will add much more readability to the code. So, depending on the use-cases, we can use this pattern in our apps.

If you have ever tried creating subcomponents like this or feel this can be done in a better way, do share your approaches with me in comments!

You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning!

Top comments (17)

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
 
alvechy profile image
Alexander Vechy

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
 
alvechy profile image
Alexander Vechy

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.