simple demo of react's context api

react simple context demo.js

const CounterContext = React.createContext(0);

class CounterProvider extends React.Component {
  state = { count: 0 };
  incrementCount = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  };
  componentDidMount() {
    setInterval(this.incrementCount, 1000);
  }
  render() {
    return (
      <CounterContext.Provider value={this.state.count}>
        {this.props.children}
      </CounterContext.Provider>
    );
  }
}

const DisplayCount = () => (
  <CounterContext.Consumer>
    {value => <div>{value}</div>}
  </CounterContext.Consumer>
);

class App extends React.Component {
  render() {
    return (
      <CounterProvider>
        <div>
          <DisplayCount />
        </div>
      </CounterProvider>
    );
  }
}