I am trying to build a modal for 2FA. What I need to do is re-render modal everytime it opens (when you close and open modal again, it will show different QR code).

However, I've encountered one problem. When I try to fetchData() to generate new QR code in useEffect, it throws me an error if I do it inside if (isOpen) statement.

If I do any other action such as console.log inside the same if statement, it works just fine. Problem only occurs when I try to run fetchData() inside the statement.

Error is the following:

Unhandled Runtime Error 
TypeError: Cannot read properties of null (reading 'length')

  69 |   out += String.fromCharCode(0xe0 | charcode >> 12);
  70 |   out += String.fromCharCode(0x80 | charcode >> 6 & 0x3f);
> 71 |   out += String.fromCharCode(0x80 | charcode & 0x3f);
  72 | } else {
  73 |   // This is a surrogate pair, so we'll reconsitute the pieces and work
  74 |   // from that

My code:

const QRModal = ({ isOpen, setIsOpen, setIsTwoStep }) => {

    const { theme, token, handleError, setNotification } = useContext(AuthContext)

    const [authValues, setAuthValues] = useState({
        qr: null,
        secret: null
    })
    const [manual, setIsManual] = useState(false)
    const [isLoading, setIsLoading] = useState(false)

    useEffect(() => {

        const fetchData = async () => {
            await generateQr()
        }
        
        if (isOpen) {
            fetchData()
        }
    }, [isOpen])

Without the if statement, it will re-render even when it closes, leading to generation of new QR code on-close which is not suitable.

Any help and advice would be highly appreciated!