Typescript/React useRef Error: (property) React.RefObject<HTMLFormElement>.current: HTMLFormElement | null Object is possibly 'null'.ts(2531)

Question

I'm having an issue with Typescript and it's giving me the following error listed below. The part of const formRef = useRef<HTMLFormElement>(null); seems to be good, but the issue looks to be with formRef.current.checkValidity().

How can I add the Typescript typing/get rid of the error?

Error:

(property) React.RefObject<HTMLFormElement>.current: HTMLFormElement | null
Object is possibly 'null'.ts(2531)

Code:

  // React Hooks: Refs
  const formRef = useRef<HTMLFormElement>(null);

  // Send Verification Code
  const sendVerificationCode = (event: any) => {
    // Event: Cancels Event (Stops HTML Default Form Submit)
    event.preventDefault();

    // Event: Prevents Event Bubbling To Parent Elements
    event.stopPropagation();

    // const reference = <HTMLFormElement>formRef.current;


    console.log('WHY IS THE FORM VALID???');
    console.log(formRef.current.checkValidity());

    // Check Form Validity
    if (formRef.current.checkValidity() === true) {
      // Validate Form
      setValidated(true);

      // Redux: Send Verification Code Request
      dispatch(sendVerificationCodeRequest(email));
    }
    else {
      // Do Nothing (Form.Control.Feedback Will Appear)
      console.log('DO NOTHING');
    }
  };

T.J. Crowder · Accepted Answer · 2020-08-19 06:46:03Z

2

As the error says, the problem is that the ref could be null — and in fact, that's what you're initializing it to. That means formRef.current may be null. Which means formRef.current.checkValidity() needs a check for whether formRef.current is null.

You can use &&:

if (formRef.current && formRef.current.checkValidity()) {
//  ^^^^^^^^^^^^^^^^^^^

or the new optional chaining operator:

if (formRef.current?.checkValidity()) {
//                 ^

Side note: There's almost¹ never any reason for === true or === false, and certainly none above. checkValidity returns a boolean, so you already have a boolean to test with the if.

// Idiomatically:
if (x) {  // Is this true?
    // ...
}

if (!x) { // Is this false?
    // ...
}

¹ "almost" - The only time it really makes sense is if what you're testing may not be a boolean at all and you want the check to result in false if it isn't, which is a rare edge case.

edited Aug 19, 2020 at 6:46

answered Aug 19, 2020 at 6:25

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

jabuj · Accepted Answer · 2020-08-19 08:08:02Z

0

You must somehow ensure formRef.current is not null, because it could be. One way is to add this in the beginning of the callback:

if(!formRef.current) return

Also you could use the optional chaining operator, although in this case if formRef.current turns out to be null, the DO NOTHING part of code will be triggered

if(formRef.current?.checkValidity() === true)

edited Aug 19, 2020 at 8:08

answered Aug 19, 2020 at 6:26

jabuj

3,7571 gold badge18 silver badges45 bronze badges

Collectives™ on Stack Overflow

Typescript/React useRef Error: (property) React.RefObject<HTMLFormElement>.current: HTMLFormElement | null Object is possibly 'null'.ts(2531)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related