MENU


Forwarding Refs

If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component. The solution is to forward the ref:


RESETRUNFULL
function logProps(Component) {
   class LogProps extends React.Component {
      componentDidUpdate(prevProps) {
         console.log('old props:', prevProps);
         console.log('new props:', this.props);
      }
      render() {
         const {forwardedRef, ...rest} = this.props;
         return <Component ref={forwardedRef} {...rest} />;
     }
   }
   return React.forwardRef((props, ref) => {
      return <LogProps {...props} forwardedRef={ref} />;
   });}