Lesson 10 : TypeError: Cannot read properties of undefined (reading 'toString')

[MrPositive0709]

I ran into this bug :

this is LotteryEntrance.js file :
`//have a function to enter the lottery
import { useWeb3Contract } from "react-moralis"
import { abi, contractAddresses } from "../constants/index"
import { useMoralis } from "react-moralis"
import { useEffect, useState } from "react"
import { ethers } from "ethers"

export default function LotteryEntrance() {
const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
const chainId = parseInt(chainIdHex)
const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
let [entranceFee, setEntranceFee] = useState("0")

const { runContractFunction: enterRaffle } = useWeb3Contract({
    abi: abi,
    contractAddresses: raffleAddress,
    functionName: "enterRaffle",
    params: {},
    msgValue: entranceFee,
})

const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddresses: raffleAddress,
    functionName: "getEntranceFee",
    params: {},
})

useEffect(() => {
    if (isWeb3Enabled) {
        //try to read the raffle entrance fee
        async function updateUI() {
            const entranceFeeFromCall = (await getEntranceFee()).toString()
            setEntranceFee(entranceFeeFromCall)
        }
        updateUI()
    }
}, [isWeb3Enabled])

return (
    <div>
        Hi from Lottery Entrance
        {raffleAddress ? (
            <div>
                <button
                    onclick={async function () {
                        await enterRaffle()
                    }}
                >
                    Enter Raffle
                </button>
                Entrance Fee : {ethers.utils.formatUnits(entranceFee, "ether")} ETH
            </div>
        ) : (
            <div>No Raffle Address Detected</div>
        )}
    </div>
)

}
`

[alfaqi]

First after deploy the contract, make sure your backend is running (if you're using localhost, but you don't need if you'll use testnet).
then check if the function returns the value of entranceFee by console.log

[MrPositive0709]

@alfaqi it returns the value of entranceFee is 0 , is it a problem ?

[MrPositive0709]

If I remove toString() it returns the value of entranceFee is undefined

[MrPositive0709]

it is undefined at all , it only returns 0 at first and then it returns undefined no matter there is toString() or not

[SamarthBagga]

@MrPositive0709 did you manage to solve the issue?

[TheDude-dev]

@MrPositive0709 I ran into the same issue then I noticed I wasn't connected to hardhat-localhost. Make sure your Metamask is connected to hardhat-localhost and your hardhat node is running. It should work properly

[SamarthBagga]

@Bobodilo I am also running into this problem, I have my hardhat node running with the command yarn hardhat node and have switched the nework to hardhat in metamask and am on my imported account from hardhat but i still get the entrance fee as undefined in the console and the enter raffle also does not work. Could you help?

[highHumann]

First make the updateUI function outside the useEffect() then use it inside it like shown in below

 async function updateUI() {
        
        const entranceFeeFromCall = (await getEntranceFee()).toString()
        const numPlayersFromCall = (await getPlayersNumber()).toString()
        const recentWinnerFromCall = await getRecentWinner()
        setEntranceFee(entranceFeeFromCall)
        setNumberOfPlayers(numPlayersFromCall)
        setRecentWinner(recentWinnerFromCall)
    }

    useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
        }
    }, [isWeb3Enabled])

[DarshanJain-Techuz]

Hii @MrPositive0709 , don't worry
You just need to replace your updateAbi function in 99-update-front-end.js file with below function

async function updateAbi(){
const lottery = await ethers.getContract("Lottery");
fs.writeFileSync(FRONT_END_ABI, JSON.stringify(lottery.interface.fragments))
}
and rerun harhdat node which will update your abi.json file
Following above steps will fix your issue.

[alfaqi]

Hello everyone
Check if there are typo , like this contractaddresses: raffleAddress, it’s contractAddress, make sure you are writing it correctly.