DEV Community

loading...
Cover image for Create react subcomponents in a simple way!

Create react subcomponents in a simple way!

ms_yogii profile image Yogini Bende ・3 min read

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!

And your feedback on article will be welcomed, always!!
Keep learning!

Discussion (13)

pic
Editor guide
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
ms_yogii profile image
Yogini Bende Author

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
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
ms_yogii profile image
Yogini Bende Author

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
ms_yogii profile image
Collapse
clay profile image
Clay Ferguson

In the platform I wrote (quanta.wiki), I ended up using a React framework where all the GUI elements have a "Class" for them, so I literally never have to see JSX or worry about 'templating'. All templating is always a friction point imo, and if I can do everything 100% in JS/TS it's better.

Here's an the Login Dialog for example:
(notice the JS is even more clear than the equivalent JSX would be)

github.com/Clay-Ferguson/quantizr/...

Here's the more direct explanation if what I'm doing:

reactjs.org/docs/react-without-jsx...

Collapse
paras594 profile image
Paras 🧙‍♂️

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

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
andrewbaisden profile image
Andrew Baisden

Cool interesting idea.

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
ms_yogii profile image
Yogini Bende Author

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