Using div React useRef hook, typescript?

Question

I'm using a qrcode.react library and creating useRef hook

const qrRef = React.useRef();

and then using it in

const downloadQRCode = (evt: React.FormEvent) =>{
        evt.preventDefault();

        // @ts-ignore
        let canvas = qrRef.current.querySelector("canvas");
        let image = canvas.toDataURL("image/png");
        let anchor = document.createElement("a");
        anchor.href = image;
        anchor.download="qr-code.png";
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
        
        setUrl("");
    };
<div className="qr-container">
    <form onSubmit={downloadQRCode} className="qr-container_form">
       <input
         type="text"
         value={url}
         onChange={(e) => setUrl(e.target.value)}
         placeholder="https://example.com"
       />
       <button type="submit">Download QR Code</button>
    </form>
    <div className="qr-container_qr-code" ref={qrRef}>{qrCode}</div>
</div>

and I'm getting this error

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Basically all it has to does is to download QR code which has been generated.

Judith Hartmann · Accepted Answer · 2021-12-01 12:55:46Z

21

try initialising it with:

const qrRef = React.useRef<HTMLDivElement>(null);

answered Dec 1, 2021 at 12:55

Judith Hartmann

4013 silver badges6 bronze badges

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

Comments

Yilmaz · Accepted Answer · 2022-10-01 04:17:38Z

0

I think should be like this based on the error message you are getting

 const qrRef = useRef() as React.MutableRefObject<HTMLDivElement>

answered Oct 1, 2022 at 4:17

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Collectives™ on Stack Overflow

Using div React useRef hook, typescript?

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