React | ForwardedRef using React.Component

Question

I'm creating a custom component in React, and I need to export it using forwardedRef. But when I try, this error occurs:

error

my code:

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{
  ref?: React.RefObject<HTMLButtonElement>;
}

class Button extends React.Component<ButtonProps> {

  render() {
    const {
      ref,
      children,
      ...otherProps
    } = this.props;
    return (
      <button 
        {...otherProps} 
        ref={ref}
      >
        {children}
      </button>
    )
  }
}

const ButtonForwarded = React.forwardRef<ButtonProps>((props, ref) => 
<Button {...props} ref={ref} /> );

ButtonForwarded.displayName = 'Button';

export default ButtonForwarded;

Try to rename the ref property to some other name in the Button component. — Pranavan
– Pranavan, Commented Apr 17, 2022 at 17:34

Hakim Abdelcadir · Accepted Answer · 2022-04-17 17:41:25Z

2

Create the ButtonForwarded component like this:

const ButtonForwarded = React.forwardRef((props: ButtonProps, ref: LegacyRef<Button>) => <Button {...props} ref={ref} /> );

edited Apr 17, 2022 at 17:41

answered Apr 17, 2022 at 17:36

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React | ForwardedRef using React.Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related