Resetting form problem in web3uikit

[ritesh798]

hi guys i am facing an issue with web3uikit form . when I am submitting my form I want it to be reset after submitting can anyone help me
this is my file

Approve.js:

import { useState } from "react";
import { useWeb3Contract, useMoralis } from "react-moralis";
import { Form } from "web3uikit";
const contractAddresses = require("../constants/contractAddresses.json");
const abi = require("../constants/abi.json");

export default function Main() {
  const { chainId: chainIdHex } = useMoralis();
  const chainId = parseInt(chainIdHex);
  const antTokenAdddress =
    chainId in contractAddresses ? contractAddresses[chainId][0] : null;
  const [userAllowance, setUserAllowance] = useState("0");
  const ethAllowances = userAllowance / 10 ** 18;
  
  const { runContractFunction } = useWeb3Contract();

  async function checkAllowance(data) {
    console.log("checking Allowances");
    const ownerAddress = data.data[0].inputResult;
    const spenderAddress = data.data[1].inputResult;
    const returnedAllowances = await runContractFunction({
      params: {
        abi: abi,
        contractAddress: antTokenAdddress,
        functionName: "allowance",
        params: {
          owner: ownerAddress,
          spender: spenderAddress,
        },
      },
      onError: (error) => console.log(error),
    });
    if (returnedAllowances) {
      setUserAllowance(returnedAllowances.toString());
    }
  }

  return (
    <div>
      <Form
        onSubmit={checkAllowance}
        data={[
          {
            name: "owner Address",
            type: "text",
            inputWidth: "50%",
            value: "",
            key: "ownerAddress",
          },
          {
            name: "Spender address",
            type: "text",
            inputWidth: "50%",
            value: "",
            key: "spenderAddress",
          },
        ]}
        title="Check Allowance"
        id="Main Form"
      />
      <div>Allowances are: {ethAllowances}ETH</div>
    </div>
  );
}

[ritesh798]

@alymurtazamemon @pacelliv @Koowah @rin-st @@Sol-Devloper @0xpolarzero @Neftyr Guys can help me ASAP

[AmitKochar1]

const [getState, setUserState] = useState(bool), We can set it to true, upon submitting this can be set true. Then check for getState to reset the form. This is how I would do it. I'm sure there are other ways.

[ritesh798]

Is there any property in web3uikit form exist to reset it after getting that state

[alymurtazamemon]

@ritesh798 You need to assign the same variable to the value of the text field. For example, you have a field which gets the age in number and you have a useState hook like this; const [age, setAge] = useState();. Then you need to assign this age variable to the value of the text field which controls that text field. And once you get the result process everything you need to reset it like this setAge(undefined) which reset the value of text field.