diff --git a/examples/reference-react-forward-ref.js b/examples/reference-react-forward-ref.js
index 59e8a23d..92cfbecc 100644
--- a/examples/reference-react-forward-ref.js
+++ b/examples/reference-react-forward-ref.js
@@ -1,4 +1,4 @@
-function enhance(WrappedComponent) {
+function enhance(Component) {
class Enhanced extends React.Component {
// ...
@@ -6,10 +6,8 @@ function enhance(WrappedComponent) {
const {forwardedRef, ...rest} = this.props;
// Assign the custom prop "forwardedRef" as a ref
- // highlight-range{1-3}
- return (
-
- );
+ // highlight-next-line
+ return ;
}
}
@@ -19,6 +17,12 @@ function enhance(WrappedComponent) {
return ;
}
+ // These next lines are not necessary,
+ // But they do give the component a better display name in DevTools,
+ // e.g. "ForwardRef(withTheme(MyComponent))"
+ const name = Component.displayName || Component.name;
+ enhanceForwardRef.displayName = `enhance(${name})`;
+
// highlight-next-line
return React.forwardRef(enhanceForwardRef);
}