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 (
     <ThemeContext.Consumer>
       {theme => (
         <button
-            {...this.props}
+          {this.props}
           style={{backgroundColor: theme.background}}
         />
       )}
     </ThemeContext.Consumer>
   );
 }
-}
 
 export default ThemedButton;