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); }