0

I'm working on web 3.0 project . Context Api is used to carry out functions. However, the issue is that whenever I try to submit formdata to the context, an error message appears. Cannot read properties of undefined (reading 'map'). Actually, I'm invoking a function called sendTransaction() on handleSubmit, but the function is throwing the following error: Uncaught (in promise) No ethereum object found

As you can see, I'm using useContext to get handleChange and sending data to it.

Welcome.jsx

Here is the code:

const Input = ({ placeholder, name, type, value, handleChange }) => (
      <input
        placeholder={placeholder}
        type={type}
        step="0.0001"
        value={value}
        onChange={(e) => handleChange(e, name)}
       
      />
    )
                const Welcome = () => {
                  const { currentAccount, connectWallet, handleChange, sendTransaction, formData } = useContext(TransactionContext);
                
                  const handleSubmit = (e) => {
                    const { addressTo, amount, keyword, message } = formData;
                    e.preventDefault();
                    if (!addressTo || !amount || !keyword || !message) return;
                    sendTransaction();
                  };
                  return (
           
    
                  <div>
                    <Input placeholder="Address To" name="addressTo" type="text" handleChange={handleChange} />
                    <Input placeholder="Amount (ETH)" name="amount" type="number" handleChange={handleChange} />
                    <Input placeholder="Keyword (Gif)" name="keyword" type="text" handleChange={handleChange} />
                    <Input placeholder="Enter Message" name="message" type="text" handleChange={handleChange} />
        
                    <div  />
        
                    {false? <Loader /> : (
                        <button
                          type="button"
                          onClick={handleSubmit}
                       
                        >
                          Send now
                        </button>
                      )}
                  </div>
        }
    
    export default Welcome;

And when I submit the formData, it displays the Error: Uncaught error (in promise) No ethereum object. I'm not sure why, but the sendTransaction method does not return the form data.

TransactionContext.jsx:

const getEthereumContract = () => {
    const provider = new ethers.providers.Web3Provider(ethereum)
    const signer = provider.getSigner();
    const TransactionContract = new ethers.Contract(contractAddress, contractABI, signer)


    console.log({
        provider,
        signer,
        TransactionContract

    })
}


export const TransactionProvider = ({ children }) => {
    const [currentAccount, setCurrentAccount] = useState("")
    const [formData, setformData] = useState({ addressTo: "", amount: "", keyword: "", message: "" });


    const handleChange = (e, name) => {
        setformData((prevState) => ({ ...prevState, [name]: e.target.value }));
    };
   const sendTransaction = async () => {
        try {
            if (!ethereum) return alert("Please install metamask")
            const { addressTo, amount, keyword, message } = formData;
            getEthereumContract()

        }
        catch (error) {
            console.log(error)
            throw new Error("No ethereum object");

        }

    }
    return (
        <TransactionContext.Provider value={{
            connectWallet,
            currentAccount,
            sendTransaction,
            handleChange,
            formData,
        }}>
            {children}
        </TransactionContext.Provider>
    )


}
2
  • Yes I resolved the issue. Actually the problem was with the import of contractAbi. It was not correctly imported that why sendTransaction is showing errors
    – sohaib
    Aug 7, 2022 at 20:21
  • Please provide and accept an answer or delete this post.
    – isherwood
    Aug 8, 2022 at 19:59

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.