React context usage and overriding example

example

import React from 'react';

class A extends React.Component {
  render() {
    return (
      <div>
        <h1>A</h1>
        <B/>
      </div>
    );
  }

  static childContextTypes = {
    given: React.PropTypes.string
  };

  getChildContext() {
    return {
      given: 'A'
    };
  }
}

class B extends React.Component {
  render() {
    return (
      <div>
        <h1>B from {this.context.given}</h1>
        <C/>
      </div>
    );
  }

  static contextTypes = {
    given: React.PropTypes.string
  };

  static childContextTypes = {
    given: React.PropTypes.string
  };

  getChildContext() {
    return {
      given: 'B'
    };
  }
}

class C extends React.Component {
  render() {
    return (
      <div>
        <h1>C from {this.context.given}</h1>
      </div>
    );
  }

  static contextTypes = {
    given: React.PropTypes.string
  };
}

export default A;