I have a problem Using React and TS

I have state of the email and password in States

const emailRef = useRef<string | null>(null);
const passwordRef = useRef<string | null>(null);

Setting them like this:

const onEmailChange = (value: any) => {
        emailRef.current = value;
    };

    const onPasswordChange = (value: any) => {
        passwordRef.current = value;
    };

And try to use them onButtonEnter function butt get this issue:

const onButtonEnter = () => {
        if (!buttonDisabled) {
            setButtonDisabled(true);
            if (emailRef === '' && passwordRef === '') { - here I have an issue
                showAlert(errors.invalid);

!!! This condition will always return 'false' since the types 'MutableRefObject<string | null>' and 'string' have no overlap. TS2367

What it can be?

I have a problem Using React and TS

I have state of the email and password in States

const emailRef = useRef<string | null>(null);
const passwordRef = useRef<string | null>(null);

Setting them like this:

const onEmailChange = (value: any) => {
        emailRef.current = value;
    };

    const onPasswordChange = (value: any) => {
        passwordRef.current = value;
    };

And try to use them onButtonEnter function butt get this issue:

const onButtonEnter = () => {
        if (!buttonDisabled) {
            setButtonDisabled(true);
            if (emailRef === '' && passwordRef === '') { - here I have an issue
                showAlert(errors.invalid);

!!! This condition will always return 'false' since the types 'MutableRefObject<string | null>' and 'string' have no overlap. TS2367

What it can be?

• javascript
• reactjs
• typescript

• 1 You are paring a reference to a DOM element with a string, which doesn't make sense. – Roberto Zvjerković Commented Jan 31, 2021 at 20:21

1 Answer 1

The answer to your issue is in the error message:

• emailRef is a react object - 'MutableRefObject<string | null>'
• emailRef.current is your string

emailRef will never be '', emailRef.current on the other hand might very well be.

Change

if (emailRef === '' && passwordRef === '') {

into

if (emailRef.current === '' && passwordRef.current === '') {

And maybe, read up a little bit more on useRef in React docs.