Lesson 10: Getting "Undefined" for the getEntranceFee() function**

[chimneyboy1]

Issue: Getting "Undefined" for the getEntranceFee() function

Hi, I have checked similar discussions and solutions, but they did not work.
Here is the solutions I tried.

• Adjusting the MetaMask chain ( Hardhat: 31337)
  Lesson 10: getEntranceFee is returning undefined. #685
• Not using "JSON.stringify"
  Lesson 10: getEntranceFee is returning undefined. #685 (comment)

I would be appreciated if you could help me.

My all files are here (Github Repo):

My code: https://github.com/chimneyboy1/hh-fcc/tree/40aaf45636fe5e7869422758d56e3fafcfb9c382/nextjs-smartcontract-lottery-fcc

// have a function to enter the lottery

import { useWeb3Contract } from "react-moralis"
// import { Contract } from "web3uikit"
import { abi, contractAddresses } from "../constants"
import { useMoralis } from "react-moralis"
import { getWrappedNative } from "web3uikit"
import { useEffect } from "react"

export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled, Moralis } = useMoralis()
    const chainId = parseInt(chainIdHex) // "PaeseInt" make the number from hex code
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    // console.log(raffleAddress)

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

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

    let entranceFee = ""

    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                // const something = await getEntranceFee()
                // console.log(something)
                entranceFee = await getEntranceFee()
                console.log(entranceFee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return (
        <div>
            Hi from Lottery entranceFee!<div>{entranceFee}</div>
        </div>
    )
}

The problem part is here.

 useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                // const something = await getEntranceFee()
                // console.log(something)
                entranceFee = await getEntranceFee()
                console.log(entranceFee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

[alfaqi]

1- the code is fine, just missed this functionName: instead of function,
and I think it is contractAddress not contractAddresses
like this

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

2- you can use useState hook instead of using native variables.

const [entranceFee, setEntranceFee] = useState("");

after changes will be like this

  const entranceFeeFunction = async () => {
    const entranceFee = await getEntranceFee();
    setEntranceFee(entranceFee.toString());
    console.log(`entranceFee ${entranceFee}`);
  };

  useEffect(() => {
    if (isWeb3Enabled) {
      async function updateUI() {
        entranceFeeFunction();
      }
      updateUI();
    }
  }, [isWeb3Enabled]);

I hope this helps

[chimneyboy1]

Thank you so much! It finally worked now!

[alfaqi]

note: don't push node_modules folder, add it into .gitignore file.

[chimneyboy1]

Oops!
It was actually my first push and throwing questions in the community. I will note it!
Thanks again!