Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void)

Question

I have a problem with useRef in TypeScript.
I want to type it but I get an error, like this:
My Container component is:

    const HeaderContainer: React.FC = () => {
    const addressElement = useRef<HTMLInputElement | undefined>();
    
        const handleCopy = useCallback(() => {
            if (addressElement.current !== undefined) {
                addressElement.current.select();
                document.execCommand("copy");
            }
        }, [addressElement]);
    return <HeaderUI
        addressElement={addressElement}
        handleCopy={handleCopy} />
}

And UI component is:

interface IProps {
    handleCopy: (event: React.MouseEvent) => void,
    addressElement: React.MutableRefObject<HTMLInputElement | undefined>,
}
const HeaderUI: React.FC<IProps> = ({
                                        handleCopy, addressElement
                                    }) => {
return <div className={classes.Header}>
        <div className={classes["Header-Section"]}>
            <span className={classes["Section-Title"]}>Персональный адрес кошелька:</span>
            {address && <input
              type="text"
              className={classes["Section-Value"]}
              ref={addressElement}
              value={address}
              readOnly/>}
        </div>
        <CopyLinkButtonContainer onClick={handleCopy}/>
    </div>;
}

Can you help please to fix this problem?

Thanks.

Hengist

Answer 1

the type setting for addressElement should be null instead of undefined.

And, a better design to naming and passing ref is... just use ref.

<HeaderUI
        ref={addressElement}
        handleCopy={handleCopy} />

Then...

const HeaderUI: React.FC<IProps> = ({
                                        handleCopy, addressElement, ref
                                    }) => {
return <div className={classes.Header}>
        <div className={classes["Header-Section"]}>
            <span className={classes["Section-Title"]}>Персональный адрес кошелька:</span>
            {address && <input
              type="text"
              className={classes["Section-Value"]}
              ref={ref}
              value={address}
              readOnly/>}
        </div>
        <CopyLinkButtonContainer onClick={handleCopy}/>
    </div>;
}

Format

Answer 2

Just pass null inside brackets like this.

const addressElement = useRef<HTMLInputElement>(null);

Prelect

more explanation would be nice, but this should be the accepted answer! – Comanche

Answer 3

The last line of the error is your solution: Your useRef expects the type

HTMLInputElement | null

but you're setting the type

HTMLInputElement | undefined

---

Just change your types to null instead of undefined:

const addressElement = useRef<HTMLInputElement | null>();

{... addressElement: React.MutableRefObject<HTMLInputElement | null>, ...}

and change your check to:

if (addressElement.current !== null) {

Allay

Answer 4

basically it is saying that ref object is undefined so intialize this with null.

const ref= useRef(null);

Colp