[sitecore-jss-react] Refactored withComponentFactory HOC (#1086)

* refactored withComponentFactory enhancer

* removed consumer

packages/sitecore-jss-react/src/enhancers/withComponentFactory.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentFactoryReactContext } from '../components/SitecoreContext';
 import { ComponentFactory } from '../components/sharedTypes';
+import { useContext } from 'react';
 
 export interface ComponentFactoryProps {
   componentFactory?: ComponentFactory;
@@ -12,11 +13,19 @@ export interface ComponentFactoryProps {
 export function withComponentFactory<T extends ComponentFactoryProps>(
   Component: React.ComponentClass<T> | React.FC<T>
 ) {
-  return function WithComponentFactory(props: T) {
-    return (
-      <ComponentFactoryReactContext.Consumer>
-        {(context) => <Component {...props} componentFactory={props.componentFactory || context} />}
-      </ComponentFactoryReactContext.Consumer>
-    );
-  };
+  /**
+   * @param {T} props - props to pass to the wrapped component
+   * @returns {JSX.Element} - the rendered component
+   */
+  function WithComponentFactory(props: T): JSX.Element {
+    const context = useContext(ComponentFactoryReactContext);
+
+    return <Component {...props} componentFactory={props.componentFactory || context} />;
+  }
+
+  WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+    Component.name ||
+    'Anonymous'})`;
+
+  return WithComponentFactory;
 }