Form doesn't grab values after a submit

[PatrickAlphaC]

I have a form that looks like such:

<Form
                onSubmit={approveAndList}
                buttonConfig={{
                    isLoading: false,
                    type: "submit",
                    theme: "primary",
                    text: "Sell NFT!",
                }}
                data={[
                    {
                        value: "",
                    },
                    {
                        value: "",
                    },
                    {
                        value: "",
                    },
                ]}
                title="Sell your NFT!"
                id="Main Form"
            />

And a approveAndList function that looks like such:

    async function approveAndList(data: any) {
        console.log(data.data[0].inputResult)
        console.log(data.data[1].inputResult)
        console.log(data.data[2].inputResult)
    }

In my UI, I have this for the form:

On the first submit, I'll be able to console.log out the correct variables from the form.

Now, if I don't touch the form, the UI will still have those values in their fields, but in the code they will show up as blank and I have to reenter them even though the UI shows the fields still populated.

Could we have these by default grab whenever value is in them? Or have them cleared anytime a form is submitted?

[BillyG83]

TY I will check this for you asap

[rayyan224]

Hi, A temporary solution could be to pass the Form comp a key.

Const {formKey, setFormKey} = useState(math.random)
<Form 
{...props}
Key={formKey}
/>

And then your approveList would have

approveAndList(){
...logic 
SetFormKey(math.random)
}

Why does this work? It's because Form by default, has empty inputs. So if we want to reset the form state we can re render the component, and thus it will re render with empty Form data. In react changing the key of the component will re-render it. This is what we call binded props.

You can further optimize the key logic if u chosse with useMemo but this is the jist!

I hope this helps, 🙌. Feel free to shoot anymore questions this way.

[BillyG83]

nice suggestion @rayyan224 TY

Ty for the report Patrick!

I was also going to add that on successful return of the data I had expected that you would perform some action that would remove the form and maybe render a nice message perhaps?

Either way you can track the pull request i just opened. It will disable the submit button after its clicked and the data is successfully returned. At least now you can't get the empty data, which was buggy for sure. Also just FYI this is a minimal change because I plan to refactor Form soon and I don't want to push too many breaking changes as traction on the kit is really heating up.

Thanks for using the kit and reporting the issue @PatrickAlphaC you are a valued member of the web3uiKit community 😁

[PatrickAlphaC]

Glad to add helpful issues to keep improving this much needed project!!

[BillyG83]

hey @PatrickAlphaC your issue https://github.com/web3ui/web3uikit/pull/485 was merged and will be out in the next release (in the next few days max)

[PatrickAlphaC]

Dope!!!