docs(hoc): Use function component as example instead of class (typescript-cheatsheets#221)

mjsarfatti · web-flow · commit e6b3a492ca42 · 2020-04-29T18:17:16.000+02:00
diff --git a/docs/hoc/full-example.md b/docs/hoc/full-example.md
@@ -60,23 +60,21 @@ export function withTheme<T extends WithThemeProps = WithThemeProps>(
     WrappedComponent.displayName || WrappedComponent.name || "Component";
 
   // Creating the inner component. The calculated Props type here is the where the magic happens.
-  return class ComponentWithTheme extends React.Component<
-    Omit<T, keyof WithThemeProps>
-  > {
-    public static displayName = `withTheme(${displayName})`;
-
-    public render() {
-      // Fetch the props you want inject. This could be done with context instead.
-      const themeProps = getThemePropsFromSomeWhere();
-
-      // this.props comes afterwards so the can override the default ones.
-      return <WrappedComponent {...themeProps} {...(this.props as T)} />;
-    }
+  const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
+    // Fetch the props you want to inject. This could be done with context instead.
+    const themeProps = useTheme();
+
+    // props comes afterwards so the can override the default ones.
+    return <WrappedComponent {...themeProps} {...(props as T)} />;
   };
+
+  ComponentWithTheme.displayName = `withTheme(${displayName})`;
+
+  return ComponentWithTheme;
 }
 ```
 
-Note that the `{...this.props as T}` assertion is needed because of a current bug in TS 3.2 https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
+Note that the `{...(props as T)}` assertion is needed because of a current bug in TS 3.2 https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
 
 Here is a more advanced example of a dynamic higher order component that bases some of its parameters on the props of the component being passed in:
 
