From ef23c49e840b4f8b3dc67b9be305f9cbf36a9667 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 23 Mar 2018 09:15:25 -0700
Subject: [PATCH] Updated multi-context example to show more indirection

---
 examples/context/multiple-contexts.js | 37 +++++++++++++++++----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/examples/context/multiple-contexts.js b/examples/context/multiple-contexts.js
index c8833d63..73737d37 100644
--- a/examples/context/multiple-contexts.js
+++ b/examples/context/multiple-contexts.js
@@ -6,31 +6,40 @@ const ThemeContext = React.createContext('light');
 // highlight-next-line
 const UserContext = React.createContext();
 
+// An intermediate component that depends on both contexts
+const Toolbar = props => {
+    // highlight-range{2-10}
+  return (
+    <ThemeContext.Consumer>
+      {theme => (
+        <UserContext.Consumer>
+          {user => (
+            <ProfilePage user={user} theme={theme} />
+          )}
+        </UserContext.Consumer>
+      )}
+    </ThemeContext.Consumer>
+  );
+};
+
 class App extends React.Component {
   static propTypes = {
     theme: PropTypes.string,
     signedInUser: PropTypes.shape({
       id: number,
       name: string,
-      avatar: string,
     }),
   };
 
   render() {
-    // highlight-range{9}
+    const {signedInUser, theme} = this.props;
+
+    // App component that provides initial context values
+    // highlight-range{2-3,5-6}
     return (
-      <ThemeContext.Provider value={this.props.theme}>
-        <UserContext.Provider
-          value={this.props.signedInUser}>
-          <ThemeContext.Consumer>
-            {theme => (
-              <UserContext.Consumer>
-                {user => (
-                  <ProfilePage user={user} theme={theme} />
-                )}
-              </UserContext.Consumer>
-            )}
-          </ThemeContext.Consumer>
+      <ThemeContext.Provider value={theme}>
+        <UserContext.Provider value={signedInUser}>
+          <Toolbar />
         </UserContext.Provider>
       </ThemeContext.Provider>
     );