getEntranceFee is undefined

[Mayank-Pandey1]

I get this error when I try to stringify the value of getEntranceFee:
TypeError: Cannot read properties of undefined (reading 'toString')

LotteryEntrance.js file:

import { useWeb3Contract } from "react-moralis"
import { contractAddresses, abi } from "../constants"
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

    const [entranceFee, setEntranceFee] = useState("0")
    const [numberOfPlayers, setNumberOfPlayers] = useState("0")
    const [recentWinner, setRecentWinner] = useState("0")

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

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

    const { runContractFunction: getNumberOfPlayers } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getNumberOfPlayers",
        params: {},
    })

    const { runContractFunction: getRecentWinner } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getRecentWinner",
        params: {},
    })

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

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

    return <div>{entranceFee}</div>
}

backend update-front-end.js file:

const { ethers } = require("hardhat");
const fs = require("fs");

const FRONT_END_ADDRESSES_FILE = "../hardhat-lottery-frontend/constants/ContractAddresses.json";
const FRONT_END_ABI_FILE = "../hardhat-lottery-frontend/constants/ContractAbi.json";

module.exports = async () => {
    if (process.env.UPDATE_FRONT_END) {
        console.group("Updating Front End");
        updateContractAddresses();
        updateAbi();
    }
};

async function updateAbi() {
    const raffle = await ethers.getContract("Raffle");
    fs.writeFileSync(FRONT_END_ABI_FILE, raffle.interface.format(ethers.utils.FormatTypes.json)); //way to get the contract abi
}

async function updateContractAddresses() {
    const raffle = await ethers.getContract("Raffle");
    const currentAddresses = JSON.parse(fs.readFileSync(FRONT_END_ADDRESSES_FILE, "utf8"));
    const chainId = network.config.chainId.toString();

    if (chainId in currentAddresses) {
        if (!currentAddresses[chainId].includes(raffle.address)) {
            currentAddresses[chainId].push(raffle.address);
        }
    }
    {
        //if chainId doesn't even exist, we create a new array
        currentAddresses[chainId] = [raffle.address];
    }
    fs.writeFileSync(FRONT_END_ADDRESSES_FILE, JSON.stringify(currentAddresses));
}

module.exports.tags = ["all", "frontend"];

[alymurtazamemon]

@Mayank-Pandey1 Make sure you are getting the correct contract address in the useWeb3Contract hooks, and make sure your ABI contains the getEntranceFee function(try to remove cache and artifacts folder from contract repo and recompile the contracts and then move the abi here)

[Mayank-Pandey1]

@alymurtazamemon it didn't work still giving the same error

[alymurtazamemon]

@Mayank-Pandey1 Please leave your both smart contract and frontend repos links.

[Mayank-Pandey1]

@alymurtazamemon
https://github.com/Mayank-Pandey1/hardhat-lottery-frontend
https://github.com/Mayank-Pandey1/hardhat-smartcontract-lottery-backend

[alymurtazamemon]

@Mayank-Pandey1 As you can see below, it is now showing the fee and has not any errors. You frontend project does not have contract addresses object and contract abi in their respective json files, I just added those, run the hardhat node, move my metamask to localhost and select the hardhat 1 account in metamask and as you can see it is working fine. These are all the things which Patrick teaches step by step you just have to follow them correctly.