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