Use functional component

examples/context/theme-detailed-themed-button.js

@@ -1,19 +1,17 @@
 import {ThemeContext} from './theme-context';
 
-class ThemedButton extends React.Component {
+function ThemedButton(props) {
-  // highlight-range{3-10}
+  // highlight-range{2-9}
-  render() {
+  return (
-    return (
+    <ThemeContext.Consumer>
-      <ThemeContext.Consumer>
+      {theme => (
-        {theme => (
+        <button
-          <button
+          {this.props}
-            {...this.props}
+          style={{backgroundColor: theme.background}}
-            style={{backgroundColor: theme.background}}
+        />
-          />
+      )}
-        )}
+    </ThemeContext.Consumer>
-      </ThemeContext.Consumer>
+  );
-    );
-  }
 }
 
 export default ThemedButton;