Can anyone help me to solve this error (TypeError: contractInstance.isComplete is not a function)?

Question

My Solidity code:

// SPDX-License-Identifier: MIT

pragma solidity^0.8.17;

contract Lottery {
    address public manager;
    address payable[] public players;
    address payable winner;
    bool public isComplete;
    bool public claimed;

    constructor(){
        manager = msg.sender;
        isComplete = false;
        claimed = false;
    }

    modifier onlyManager(){
        require(msg.sender == manager);
        _;
    }

    function getManager() public view returns (address) {
        return manager;
    }

    function getWinner() public view returns (address) {
        return winner;   
    }

    function enter() public payable {
        require (msg.value >= 0.001 ether);
        require(!isComplete);
        players.push(payable(msg.sender));
    }

    function pickWinner() public onlyManager {
        require (players.length >0);
        require (!isComplete);
        winner = players[randomNumber()% players.length];
        isComplete = true;
    }

    function randomNumber() private view returns (uint){
        return uint(keccak256(abi.encodePacked(block.prevrandao, block.timestamp, players.length)));
    }

    function claimPrize() public {
        require (msg.sender == winner);
        require (isComplete);
        winner.transfer(address(this).balance);
        claimed = true;
    }

    function getPlayers() public view returns (address payable[] memory){
        return players;
    }

    
}

My Javascript code:

import React, {useState, useEffect} from "react";
import {ethers,providers} from 'ethers';
import constants from './constants';



function Home () {
    const [currentAccount, setCurrentAccount] = useState("");
    const [contractInstance, setcontractInstance] = useState('');
    const [status, setStatus] = useState(false);
    const [isWinner, setIsWinner] = useState('');

    useEffect(() => {
        const loadBlockchainData = async () => {
            if (typeof window.ethereum !== 'undefined') {
                const provider = new ethers.providers.Web3Provider(window.ethereum);
                try {
                    const signer = provider.getSigner();
                    const address = await signer.getAddress();
                    console.log(address);
                    setCurrentAccount(address);
                    window.ethereum.on('accountsChanged', (accounts) => {
                        setCurrentAccount(accounts[0]);
                        console.log(currentAccount);
                    })
                } catch (err) {
                    console.error(err);
                }
            } else {
                alert('Please install Metamask to use this application')

            }
        };

        const contract = async () => {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contractIns = new ethers.Contract(constants.contractAddress, constants.contractAbi, signer);
            setcontractInstance(contractIns);
            const status = await contractInstance.isComplete();
            setStatus(status);
            const winner = await contractInstance.getWinner();
            if (winner === currentAccount) {
                setIsWinner(true);
            } else {
                setIsWinner(false);
            }
        }

        loadBlockchainData();
        contract();
    }, [currentAccount]);

    const enterLottery = async () => {
        const amountToSend = ethers.utils.parseEther('0.001');
        const tx = await contractInstance.enter({value: amountToSend,});
        await tx.wait();
    }

    const claimPrize = async () => {
        const tx = await contractInstance.claimPrize();
        await tx.wait();
    }
    


    return(
        <div className="container">
            <h1>Lottery Page</h1>
            <div className="button-container">
                {status ? ( isWinner ? (<button className="enter-button" onClick={claimPrize}> Claim Prize </button>): 
                (<p>You are not the winner</p>)) : 
                (<button className="enter-button" onClick={enterLottery}> Enter Lottery </button>)

                }
            </div>
        </div>
    ) 

}

export default Home;

Answer 1

This is a type error which means that the contractABI you're using doesn't have that function. Apparently, you're using an older ABI. try recompiling the contract and replace the ABI