Removed context-before example

content/blog/2018-02-07-react-v-16-3.md

@@ -21,11 +21,8 @@ Version 16.3 introduces a new context API that is more efficient and supports bo
 >
 > The old context API will keep working for all React 16.x releases, so you will have time to migrate.
 
-Here is an example of how you might inject a "theme" using the old context API:
+Here is an example of how you might inject a "theme" using the new context API:
-`embed:16-3-release-blog-post/context-example-before.js`
+`embed:16-3-release-blog-post/context-example.js`
-
-And here is an example of how you might do the same with the new context API:
-`embed:16-3-release-blog-post/context-example-after.js`
 
 [Learn more about the new context API here.](#)
 

examples/16-3-release-blog-post/context-example-before.js

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-class ThemeProvider extends React.Component {
-  // highlight-range{1-3}
-  static childContextTypes = {
-    theme: PropTypes.string,
-  };
-
-  state = {
-    theme: 'light',
-  };
-
-  // highlight-range{1-5}
-  getChildContext() {
-    return {
-      theme: state.theme,
-    };
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
-class ThemedButton extends React.Component {
-  // highlight-range{1-3}
-  static contextTypes = {
-    theme: PropTypes.string,
-  };
-
-  render() {
-    // highlight-next-line
-    const background = this.context.theme ? '#fff' : '#000';
-
-    return (
-      <button style={{background}}>
-        {this.props.children}
-      </button>
-    );
-  }
-}

examples/16-3-release-blog-post/context-example-after.js → examples/16-3-release-blog-post/context-example.js

@@ -5,7 +5,7 @@ class ThemeProvider extends React.Component {
   state = {theme: 'light'};
 
   render() {
-    // highlight-range{2}
+    // highlight-range{2-4}
     return (
       <ThemeContext.Provider value={this.state.theme}>
         {this.props.children}
@@ -19,15 +19,7 @@ class ThemedButton extends React.Component {
     // highlight-range{2-4}
     return (
       <ThemeContext.Consumer>
-        {theme => {
+        {theme => <Button theme={theme} />}
-          const background = theme ? '#fff' : '#000';
-
-          return (
-            <button style={{background}}>
-              {this.props.children}
-            </button>
-          );
-        }}
       </ThemeContext.Consumer>
     );
   }