Update highlights

examples/context/forwarding-refs.js

@@ -4,6 +4,7 @@ const Button = ({theme, children}) => (
   </button>
 );
 
+// highlight-range{1,3}
 export default React.forwardRef((props, ref) => (
   <ThemeContext.Consumer>
     {theme => <Button {...props} theme={theme} ref={ref} />}

examples/context/lifecycles.js

@@ -1,5 +1,6 @@
 class Button extends React.Component {
   componentDidMount() {
+    // highlight-next-line
     alert(this.props.theme);
   }
 
@@ -13,6 +14,7 @@ class Button extends React.Component {
   }
 }
 
+// highlight-range{3}
 export default props => (
   <ThemeContext.Consumer>
     {theme => <Button {...props} theme={theme} />}

examples/context/motivation-solution.js

@@ -2,13 +2,15 @@
 // highlight-next-line
 const ThemeContext = React.createContext('light');
 
-// highlight-range{1,3-5}
-// The ThemedButton receives the theme from context
-const ThemedButton = props => (
-  <ThemeContext.Consumer>
-    {theme => <Button theme={theme} />}
-  </ThemeContext.Consumer>
-);
+const ThemedButton = props => {
+  // highlight-range{1,3-5}
+  // The ThemedButton receives the theme from context
+  return (
+    <ThemeContext.Consumer>
+      {theme => <Button theme={theme} />}
+    </ThemeContext.Consumer>
+  );
+};
 
 // An intermediate component
 const Toolbar = props => {

examples/context/multiple-contexts.js

@@ -1,7 +1,9 @@
-// Create a theme context, defaulting to light theme
+// Theme context, default to light theme
+// highlight-next-line
 const ThemeContext = React.createContext('light');
 
 // Signed-in user context
+// highlight-next-line
 const UserContext = React.createContext();
 
 class App extends React.Component {
@@ -15,6 +17,7 @@ class App extends React.Component {
   };
 
   render() {
+    // highlight-range{9}
     return (
       <ThemeContext.Provider value={this.props.theme}>
         <UserContext.Provider