ChainId is NaN (cannot convert to string) error and React rendering twice issue

[mitchhs12]

Everytime I execute my code for the LotteryEntrance.js file when deploying my front end of the lottery smart contract, I keep getting the error:

TypeError: Cannot read properties of undefined (reading 'toString') for my updateUI() function when it tries to call getEntranceFee().toString()

I initially thought that this was due to the fact that I didn't have the Rinkeby chainId "4" in my contractAddresses.json (since I was just on the local network) but I have since hardcoded my address and the "4" and I am still getting the error.

Also of note is that when the ReactDOM initially renders my application, it quickly prints ChainId is NaN to the console (when I am trying to determine what the chainId is. I think this is an async issue? But shortly after, it corrects and prints 4. I don't know whether or not these problems are related. I'm happy to provide more code but at this stage after 2hours of trying to fix this, any help would be appreciated 👍

[PatrickAlphaC]

@Valodax yes, this is an async issue.

Usually, to get around this, I do something like:

if (chainId) {
 // do whatever
}

or something. Is this what my code base is showing too?