diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
index d58a12e91b310..805acb76f5dba 100644
--- a/examples/with-context-api/README.md
+++ b/examples/with-context-api/README.md
@@ -39,6 +39,15 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## The idea behind the example*
-This example shows how to use react context api in our app. Based on WesBos example.
+This example shows how to use react context api in our app.
+
+It provides an example of using `pages/_app.js` to include include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
+
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+
+The `pages/about.js` shows how to, from the about page, how to pass an increment value from the about page into the context provider itself.
+
+
+**Based on WesBos example*.
diff --git a/examples/with-context-api/components/CounterProvider.js b/examples/with-context-api/components/CounterProvider.js
index 7566aa7b76fbb..278649087086c 100644
--- a/examples/with-context-api/components/CounterProvider.js
+++ b/examples/with-context-api/components/CounterProvider.js
@@ -15,6 +15,12 @@ class CounterProvider extends Component {
})
}
+ increaseBy = (val) => {
+ this.setState({
+ count: this.state.count + val
+ })
+ }
+
decrease = () => {
this.setState({
count: this.state.count - 1
@@ -27,7 +33,8 @@ class CounterProvider extends Component {
value={{
count: this.state.count,
increase: this.increase,
- decrease: this.decrease
+ decrease: this.decrease,
+ increaseBy: this.increaseBy
}}
>
{this.props.children}
diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json
index 76ec104d25460..d3d90d3cffe4c 100644
--- a/examples/with-context-api/package.json
+++ b/examples/with-context-api/package.json
@@ -7,7 +7,7 @@
"start": "next start"
},
"dependencies": {
- "next": "^7.0.0-canary.16",
+ "next": "^7.0.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.js
new file mode 100644
index 0000000000000..af63ff8f0464d
--- /dev/null
+++ b/examples/with-context-api/pages/about.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+/* First we import the consumer */
+import { CounterConsumer } from '../components/CounterProvider'
+import Link from 'next/link'
+
+export default class about extends Component {
+ render () {
+ return (
+ /* Then we use our context through render props */
+
+ {({ count, increase, increaseBy }) => (
+