React sub-components Take 2 - First sub-component example with the new context API

Article.js

import React from "react";

// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component
const ArticleContext = React.createContext();

// This is the Title sub-component, which is a consumer of the Article Context
const Title = () => {
  return (
    <ArticleContext.Consumer>
      {({ title, subtitle }) => (
        <div style={{ textAlign: "center" }}>
          <h2>{title}</h2>
          <div style={{ color: "#ccc" }}>
            <h3>{subtitle}</h3>
          </div>
        </div>
      )}
    </ArticleContext.Consumer>
  );
};

// This is our main Article components, which is a provider of the Article Context
const Article = props => {
  return (
    <ArticleContext.Provider {...props}>
      {props.children}
    </ArticleContext.Provider>
  );
};

Article.Title = Title;

export default Article;