Use functional component

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

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