class Green extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    <div>{this.context.number}</div>
  }
)

Green.contextTypes = {
  number: React.PropTypes.string
};

const Blue = (props) => (
  <div>
    <Green />
  </div>
)
 
class Red extends Component {
  state = {
    number : 10
  }

  getChildContext() {
    return {color: "purple"};
  }

  render() {
    return  (
      <div>
        {this.state.number}
        <Blue number={this.state.number} />
      </div>
    )
  }
}

Red.childContextTypes = {
  number: PropTypes.string
};

const AppContext = React.createContext();

class AppProvider extends Component {
  state = {
    number: 10
  }

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

const Green = () => (
  <div>
    <AppContext.Consumer>
      {(context) => context.number}
    </AppContext.Consumer>
  </div>
)

const Blue = () => (
  <div>
    <Green />
  </div>
)
 
class Red extends Component {
  render() {
    return  (
      <AppProvider> 
        <div>
          <AppContext.Consumer>
            {(context) => context.number}
          </AppContext.Consumer>
          <Blue />
        </div>
      </AppProvider>
    )
  }
}