<div id="app"></div>
html {
  font-family: sans-serif;
  color: #333;
}
class App extends React.Component {
  
  render() {
    return (
      <div>
        <h1>Passing info via context...</h1>
        <p>This is not the recommended approach for
          passing props but serves to demonstrate the feature.
        </p>
        <Parent />        
      </div>
    );
  }
}

// Note that in order to provide context Parent has been
// changed to a class instead of a stateless component
class Parent extends React.Component {
  
  // Provide the context - Parent is the context provider
  getChildContext() {
    return {
      greeting: "Say hello to my little grandchild"
    }    
  }  
  
  render() {
    return (
      <div>
        <h2>Parent</h2>
        <Child />
      </div>      
    );
  }
}

Parent.childContextTypes = {
    greeting: React.PropTypes.string
};

const Child = () => {
  return (
    <div>
      <h3>Child (no props here)</h3>
      <Grandchild />
    </div>
  );
};

// Note that a stateless component cannot provide context but it can receive context
// Note that context is the second argument passed to a stateless component
const Grandchild = (props, context) => {
  return (
    <div>
      <h4>Grandchild</h4>
      <p>{context.greeting}</p>
    </div>
  );
};

// Specify contextTypes available to Grandchild component
Grandchild.contextTypes = {
  greeting: React.PropTypes.string
}

ReactDOM.render(<App />, document.getElementById('app'));


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://fb.me/react-15.1.0.js
  2. https://fb.me/react-dom-15.1.0.min.js