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) => (
-
- ));
+ function refForwarder(props, ref) {
+ return (
+
+ );
+ }
+
+ // 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