React 16.3 Context example

React.16.3_Context.js

import React, { Component } from "react";
import { render } from "react-dom";

const PostContext = React.createContext();

class PostProvider extends Component {
	state = {
		review: "bad"
	};
	render() {
		return (
		<PostContext.Provider
			value={{
			state: this.state,
			changeReview: () =>
				this.setState({
				review: "good"
				})
			}}
		>
			{this.props.children}
		</PostContext.Provider>
		);
  }
}

const PostConsumer = props => {
	return (
	<PostContext.Consumer>
		{context => (
		<React.Fragment>
			<p>This post is <strong>{context.state.review}</strong></p>
			<button onClick={context.changeReview}>Change review</button>
		</React.Fragment>
		)}
	</PostContext.Consumer>
  );
};

// PostConsumer can be deeply nested
// without doing "props drilling"
const DummyComponent = () => {
	return <PostConsumer />;
};

export default class Index extends Component {
	render() {
		return (
			<PostProvider>
				<DummyComponent />
			</PostProvider>
		);
	}
}