useRef hook problem

[RnzTejada]

Hi everyone, i trying to get de ref of the component with hooks and im getting null or undenifed

import React, { useState,useRef } from "react";
import Logo from "../../assets/img/logo-wollet-1.svg";
import QRCode from "qrcode.react";

export default function SelectOptions() {
  const qrRef = useRef()
  const imageSettings = {
    src: Logo,
    height: 50,
    width: 50,
    excavate: true,
  };

const getQr = ()=>{
let img = qrRef.current.toDataURL('img/png')
}

  return (
    <>
      <QRCode
        ref={qrRef}
        value={url}
        renderAs="canvas"
        size={250}
        bgColor={"transparent"}
        fgColor={"#EB346D"}
        level={"M"}
        imageSettings={imageSettings}
      />

<button onClick={getQr}>Get the qr</button>
  ...
    </>
  );
}

any suggestions to get the correct ref of canvas element ?

[beautyfree]

same issue

[xueerli]

+1

[markgzl]

+1

[LionyxML]

+1

[yaser-alazm]

You cannot use ref on the original QRCode component, as a work around it you can wrap the QRCode component with a div element and pass the rep into the div element like so:

              <div ref={qrCodeEl}>
                <QRCode
                  value='qr-value'
                  size={175}
                />
              </div>

and then you can get the QRCode canvas element like so:
const canvas = qrCodeEl.current.children[0]

[LionyxML]

Thanks! That worked!

[Glittergalaxy]

Thanks! That worked!