fix HOC displayNames

- update exercises and tests

Author: colinrcummings

src/__tests__/12.js

@@ -32,9 +32,7 @@ test('renders a toggle component', () => {
   }
   const subtitleWrapperFiberNode = getDebugChild(debugInstance)
   try {
-    expect(subtitleWrapperFiberNode.type).toMatchObject({
-      displayName: 'withToggle(Subtitle)',
-    })
+    expect(subtitleWrapperFiberNode.child.type.displayName).toMatch('withToggle(Subtitle)')
   } catch (error) {
     const helpfulMessage = chalk.red(
       `🚨  Make sure you're adding a displayName prop to your Wrapper  🚨`,

src/exercises-final/12.js

@@ -111,14 +111,22 @@ class Toggle extends React.Component {
 }
 
 function withToggle(Component) {
-  const Wrapper = React.forwardRef((props, ref) => (
-    <Toggle.Consumer>
-      {toggle => <Component {...props} toggle={toggle} ref={ref} />}
-    </Toggle.Consumer>
+  class Wrapper extends React.Component {
+    render() {
+      const { forwardedRef, ...rest } = this.props
+      return (
+        <Toggle.Consumer>
+          {toggle => <Component {...rest} toggle={toggle} ref={forwardedRef} />}
+        </Toggle.Consumer>
+      )
+    }
+  }
+  Wrapper.displayName = `withToggle(${Component.displayName ||
+    Component.name})`
+  const forwardRef = React.forwardRef((props, ref) => (
+    <Wrapper {...props} forwardedRef={ref} />
   ))
-  Wrapper.displayName = `withToggle(${Component.displayName || Component.name})`
-  hoistNonReactStatics(Wrapper, Component)
-  return Wrapper
+  return hoistNonReactStatics(forwardRef, Component)
 }
 
 // this Subtitle component could be as simple as:

src/exercises-final/13.js

@@ -52,14 +52,22 @@ class Rendux extends React.Component {
 }
 
 function withRendux(Component) {
-  const Wrapper = React.forwardRef((props, ref) => (
-    <Rendux.Consumer>
-      {rendux => <Component {...props} rendux={rendux} ref={ref} />}
-    </Rendux.Consumer>
+  class Wrapper extends React.Component {
+    render() {
+      const { forwardedRef, ...rest } = this.props
+      return (
+        <Rendux.Consumer>
+          {rendux => <Component {...rest} rendux={rendux} ref={forwardedRef} />}
+        </Rendux.Consumer>
+      )
+    }
+  }
+  Wrapper.displayName = `withRendux(${Component.displayName ||
+    Component.name})`
+  const forwardRef = React.forwardRef((props, ref) => (
+    <Wrapper {...props} forwardedRef={ref} />
   ))
-  Wrapper.displayName = `withRendux(${Component.displayName || Component.name})`
-  hoistNonReactStatics(Wrapper, Component)
-  return Wrapper
+  return hoistNonReactStatics(forwardRef, Component)
 }
 
 function MyInput() {
@@ -117,14 +125,16 @@ function MySwitch() {
   )
 }
 
-const StatePrinter = withRendux(({rendux}) => (
-  <div style={{textAlign: 'left'}}>
-    state:
-    <pre data-testid="printed-state">
-      {JSON.stringify(rendux.state, null, 2)}
-    </pre>
-  </div>
-))
+const StatePrinter = withRendux(function StatePrinter({rendux}) {
+  return (
+    <div style={{textAlign: 'left'}}>
+      state:
+      <pre data-testid="printed-state">
+        {JSON.stringify(rendux.state, null, 2)}
+      </pre>
+    </div>
+  )
+})
 
 function Usage() {
   return (

src/exercises/13.js

@@ -104,14 +104,16 @@ function MySwitch() {
   )
 }
 
-const StatePrinter = withRendux(({rendux}) => (
-  <div style={{textAlign: 'left'}}>
-    state:
-    <pre data-testid="printed-state">
-      {JSON.stringify(rendux.state, null, 2)}
-    </pre>
-  </div>
-))
+const StatePrinter = withRendux(function StatePrinter({rendux}) {
+  return (
+    <div style={{textAlign: 'left'}}>
+      state:
+      <pre data-testid="printed-state">
+        {JSON.stringify(rendux.state, null, 2)}
+      </pre>
+    </div>
+  )
+})
 
 function Usage() {
   return (