introducing_context.js

// create Context
const initialAmountOfLollipops = 0;
const LollipopContext = React.createContext(initialAmountOfLollipops);

/* ... Dumbo's parent Component */
const { lollipops } = this.state;
return (
  // instead of passing lollipops to Dumbo, we pass it to the Context.Provider
  <CandyContext.Provider value={lollipops}>
    <Dumbo availableShoes={availableShoes} /* lollipops={lollipops} */ />
  </CandyContext.Provider>
);

/* ... Dumbo Component */
render () {
  const { availableShoes } = this.props;
  const result = crazyComplexMethod(availableShoes); 
  return (
    <div>
      <FirstChild clothing={this.state.firstChild} />
    </div>
  );
}

// Use Consumer to read the value which we are passing from Provider
const FirstChild = props => (
  <CandyContext.Consumer>
    {value => (
      <p>
        I am John, and I am wearing {props.clothing} today.
        {value ? "thanks for lollipop" : "I want lolipop"}
      </p>
    )}
  </CandyContext.Consumer>
);