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";
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, { 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 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

import React from 'react';
import { mount } from 'enzyme';
import Article from '../';

// First we declare some mocks
const Content = () => <div>[Mock] Content</div>;
const Subtitle = () => <div>[Mock] Subtitle</div>;
const Comments = () => <div>[Mock] Comments</div>;
const Metadata = () => <div>[Mock] Metadata</div>;
const Title = () => <div>[Mock] Title</div>;

MaximeHeckel

// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import findByType from './findByType';
import css from './styles.css';

const Title = () => null;
const Subtitle = () => null;
const Metadata = () => null;
const Content = () => null;

MaximeHeckel

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

MaximeHeckel

import React, { Component } from 'react';
import findByType from './findByType';
import css from './somestyle.css';
// We instantiate the Title sub-component
const Title = () => null;
class Article extends Component {
  // This is the function that will take care of rendering our Title sub-component
  renderTitle() {
    const { children } = this.props;
    // First we try to find the Title sub-component among the children of Article