React Subcomponents

sub-component.js

import * as React from 'react';

const getChildrenOnDisplayName = (children, displayName) =>
  React.Children.map(children, (child) =>
    child.type.displayName === displayName ? child : null
  );

const Card = ({ children }) => {
  const header = getChildrenOnDisplayName(children, 'Header');
  const body = getChildrenOnDisplayName(children, 'body');
  const footer = getChildrenOnDisplayName(children, 'footer');

  return (
    <div style={{ width: 400, margin: 24 }}>
      {header}
      {body}
      {footer}
    </div>
  );
};

const Header = ({ children, style, ...others }) => (
  <div style={{ background: '#F48FB1', height: 48, ...style }} {...others}>
    {children}
  </div>
);

Header.displayName = 'Header';
Card.Header = Header;

const Body = ({ children, style, ...others }) => (
  <div style={{ background: '#B2EBF2', height: 250, ...style }} {...others}>
    {children}
  </div>
);

Body.displayName = 'body';
Card.Body = Body;

const Footer = ({ children, style, ...others }) => (
  <div style={{ background: '#C5E1A5', height: 48, ...style }} {...others}>
    {children}
  </div>
);

Footer.displayName = 'footer';
Card.Footer = Footer;

const SubComponent = () => (
  <>
    <Card>
      <Card.Header>Header1</Card.Header>
      <Card.Body>Body1</Card.Body>
      <Card.Footer>Footer1</Card.Footer>
    </Card>

    <Card>
      <Card.Header>Header2</Card.Header>
      <Card.Body>Body2</Card.Body>
      <Card.Footer>Footer2</Card.Footer>
    </Card>
  </>
);

export default SubComponent;

Hello!
What should I do If I want to add other elements than (Header, Body & Footer).

For Example:

I want to add h1 tag to the Card for example. How can I Achieve that?

Thank you in advance!

Hello! What should I do If I want to add other elements than (Header, Body & Footer).

For Example: I want to add h1 tag to the Card for example. How can I Achieve that?

Thank you in advance!

The best way is to put the other tags into the correct component, such as:

    <Card>
      <Card.Header>
        <h1>title</h1>
      </Card.Header>
      <Card.Body>
        <img src='https://avatars.githubusercontent.com/u/20871468?s=400&u=e71d374011da7adc83fbdd59c91fa878a8c82e38&v=4' width="100" />
      </Card.Body>
      <Card.Footer>Footer1</Card.Footer>
    </Card>

Consider why we use subcomponents
read this: Cleaner Codes — React Subcomponents

How can I pass props from the (Cards) component to other subcomponents?

Hello! What should I do If I want to add other elements than (Header, Body & Footer).
For Example: I want to add h1 tag to the Card for example. How can I Achieve that?
Thank you in advance!

The best way is to put the other tags into the correct component, such as:

    <Card>
      <Card.Header>
        <h1>title</h1>
      </Card.Header>
      <Card.Body>
        <img src='https://avatars.githubusercontent.com/u/20871468?s=400&u=e71d374011da7adc83fbdd59c91fa878a8c82e38&v=4' width="100" />
      </Card.Body>
      <Card.Footer>Footer1</Card.Footer>
    </Card>

Consider why we use subcomponents read this: Cleaner Codes — React Subcomponents

Yeah, I got it. Thank you!