MaximeHeckel

import React, { Component } from "react";
import Article, { Title } from "./Article";

class App extends Component {
  constructor() {
    this.state = {
      value: {
        title: <h1>React sub-components with</h1>,
        subtitle: (
          <div>Lets make simpler and more flexible React components</div>

MaximeHeckel

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 }) => (

MaximeHeckel

// @flow
import * as React from 'react'

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

// We use classes here instead of functional components for our sub-components
// so we can define a type for each one of them

MaximeHeckel

      <Article>  
        <Article.Title />
        {/* 
          This will render if we use the sub-component pattern described in part 2,
          but will be skipped with the one described in part 1 (the findByType util 
          mentioned in the post will simply not render "<div></div>" as it's not
          a known sub-components of <Article/>.
        */}
        <div>Hello World</div>
         <Article.Metadata />

MaximeHeckel

import React, { Component } from "react";
import Article from "./Article";

class App extends Component {
  constructor() {
    this.state = {
      value: {
        title: <h1>React sub-components with</h1>,
        subtitle: (
          <div>Lets make simpler and more flexible React components</div>

MaximeHeckel

import React, { Component } from "react";
import Article from "./Article";

const text = `
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`;

class App extends Component {
  constructor() {
    this.state = {

MaximeHeckel

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 }) => (

MaximeHeckel

import React, { Component } from 'react';

const ArticleContext = React.createContext();
const OtherContext = React.createContext();

const OutOfContextComponent = OtherContext.Provider;
const Article = ArticleContext.Provider;
const View = ArticleContext.Consumer;

const Title = () => {

MaximeHeckel

...

const Title = () => null;
Title.displayName = 'Title';

const Subtitle = () => null;
Subtitle.displayName = 'Subtitle';

const Metadata = () => null;
Metadata.displayName = 'Metadata';

MaximeHeckel

<Article>
  <Article.Title>
    My Article Title
  </Article.Title>
</Article>