From 3888b47da41247bfe82dbec25205616760600bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 28 Jan 2016 20:06:09 -0800
Subject: [PATCH] Merge pull request #5923 from puppybits/patch-1

Update 12-context.md
(cherry picked from commit 9c3f595597f167fef9b0679f716216bb56e25a14)
---
 docs/docs/12-context.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/docs/12-context.md b/docs/docs/12-context.md
index 1eafd089b6..4c64736566 100644
--- a/docs/docs/12-context.md
+++ b/docs/docs/12-context.md
@@ -160,6 +160,38 @@ function Button(props, context) {
 Button.contextTypes = {color: React.PropTypes.string};
 ```
 
+## Updating context
+
+The `getChildContext` function will be called when the state or props changes. In order to update data in the context, trigger a local state update with `this.setState`. This will trigger a new context and changes will be received by the children.
+
+```javascript
+var MediaQuery = React.createClass({
+  getInitialState: function(){
+    return {type:'desktop'};
+  },
+  childContextTypes: {
+    type: React.PropTypes.string
+  },
+  getChildContext: function() {
+    return {type: this.state.type};
+  },
+  componentDidMount: function(){
+    var checkMediaQuery = function(){
+      var type = window.matchMedia("min-width: 1025px").matches ? 'desktop' : 'mobile';
+      if (type !== this.state.type){
+        this.setState({type:type}); 
+      }
+    };
+    
+    window.addEventListener('resize', checkMediaQuery);
+    checkMediaQuery();
+  },
+  render: function(){
+    return this.props.children;
+  }
+});
+```
+
 ## When not to use context
 
 Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.