Component Block pattern in React

App.jsx

import React from 'react';
import Section from './section';

export default App = () => (
  <Section>
    <Section.Header>
      <Section.Title> My Section </Section.Title>
    </Section.Header>
    <Section.Body>
      Any content here
    </Section.Body>
  </Section> 
)

Section.jsx

import React from 'react';
import PropTypes from 'prop-types';

import './section.css';

const Section = ({ children }) => (
    <section className="section">
        { children }
    </section>
);
Section.propTypes = {
    children: PropTypes.node,
};

export const Header = ({ children }) => (
    <header className="section__header">
        { children }
    </header>
);
Header.propTypes = {
    children: PropTypes.node,
};
Section.Header = Header;

export const Body = ({ children }) => (
    <div className="section__body">
        <div className="section__body-inner">
            { children }
        </div>
    </div>
);
Body.propTypes = {
    children: PropTypes.node,
};
Section.Body = Body;

export const Title = ({ children, level = 4 }) => {
    const Heading = `h${level}`;
    return <Heading className="section__title">{children}</Heading>;
};
Title.propTypes = {
    children: PropTypes.node,
    level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
};
Section.Title = Title;

export default Section;