diff --git a/content/blog/2018-02-07-react-v-16-3.md b/content/blog/2018-02-07-react-v-16-3.md index d5307c13..f16fd4cd 100644 --- a/content/blog/2018-02-07-react-v-16-3.md +++ b/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: -`embed:16-3-release-blog-post/context-example-before.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` +Here is an example of how you might inject a "theme" using the new context API: +`embed:16-3-release-blog-post/context-example.js` [Learn more about the new context API here.](#) diff --git a/examples/16-3-release-blog-post/context-example-before.js b/examples/16-3-release-blog-post/context-example-before.js deleted file mode 100644 index fac8e39f..00000000 --- a/examples/16-3-release-blog-post/context-example-before.js +++ /dev/null @@ -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 ( - - ); - } -} diff --git a/examples/16-3-release-blog-post/context-example-after.js b/examples/16-3-release-blog-post/context-example.js similarity index 66% rename from examples/16-3-release-blog-post/context-example-after.js rename to examples/16-3-release-blog-post/context-example.js index 0f9137f4..5d6b43bb 100644 --- a/examples/16-3-release-blog-post/context-example-after.js +++ b/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 ( {this.props.children} @@ -19,15 +19,7 @@ class ThemedButton extends React.Component { // highlight-range{2-4} return ( - {theme => { - const background = theme ? '#fff' : '#000'; - - return ( - - ); - }} + {theme =>