Improve React HOC example

lencioni · lencioni · commit 4dbb2af7da8d · 2016-07-27T09:54:00.000-07:00
I decided that `WrappedComponent` is clearer than `Component` here, so I
made the switch. I also realized that `WrappedComponent.name` might
still be undefined, so I added a fallback value of "Component".
diff --git a/react/README.md b/react/README.md
@@ -107,19 +107,23 @@
 
     ```jsx
     // bad
-    export default function withFoo(Component) {
+    export default function withFoo(WrappedComponent) {
       return function WithFoo(props) {
-        return <Component {...props} foo />;
+        return <WrappedComponent {...props} foo />;
       }
     }
 
     // good
-    export default function withFoo(Component) {
+    export default function withFoo(WrappedComponent) {
       function WithFoo(props) {
-        return <Component {...props} foo />;
+        return <WrappedComponent {...props} foo />;
       }
 
-      WithFoo.displayName = `withFoo(${Component.displayName || Component.name})`;
+      const wrappedComponentName = WrappedComponent.displayName
+        || WrappedComponent.name
+        || 'Component';
+
+      WithFoo.displayName = `withFoo(${wrappedComponentName})`;
       return WithFoo;
     }
     ```
