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 af6bb9f4..e2ed1431 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -1,27 +1,28 @@
function withTheme(Component) {
- // Note the second param "ref" provided by React.forwardRef.
- // We can attach this to Component directly.
- // highlight-range{1,5}
- function ThemedComponent(props, ref) {
+ // highlight-next-line
+ function ThemedComponent({forwardedRef, ...rest}) {
return (
{theme => (
-
+ // Assign the custom prop "forwardedRef" as a ref
+ // highlight-next-line
+
)}
);
}
- // 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;
- ThemedComponent.displayName = `withTheme(${name})`;
-
- // Tell React to pass the "ref" to ThemedComponent.
- // highlight-next-line
- return React.forwardRef(ThemedComponent);
+ // Note the second param "ref" provided by React.forwardRef.
+ // 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) => (
+
+ ));
}
// highlight-next-line