From 2e1554dc32961f1458a7f89b9b70bc2f8dd3040a Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Tue, 3 Apr 2018 02:02:21 +0900
Subject: [PATCH] Adopt bvaughn's example

---
 .../forward-ref-example.js                     | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/examples/16-3-release-blog-post/forward-ref-example.js b/examples/16-3-release-blog-post/forward-ref-example.js
index e2ed1431..8b9bbbb7 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -20,9 +20,21 @@ function withTheme(Component) {
   // We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
   // And it can then be attached to the Component.
   // highlight-range{1-3}
-  return React.forwardRef((props, ref) => (
-    <ThemedComponent {...props} forwardedRef={ref} />
-  ));
+  function refForwarder(props, ref) {
+    return (
+      <ThemedComponent {...props} forwardedRef={ref} />
+    );
+  }
+
+  // These next lines are not necessary,
+  // But they do give the component a better display name in DevTools,
+  // e.g. "ForwardRef(withTheme(MyComponent))"
+  // highlight-range{1-2}
+  const name = Component.displayName || Component.name;
+  refForwarder.displayName = `withTheme(${name})`;
+
+  // highlight-next-line
+  return React.forwardRef(refForwarder);
 }
 
 // highlight-next-line