ReactJS Hooks: Form submitting blank values

Question

I have a form with hidden input called campaingid receiving data from URL parameters through an external script.

See the input code:

<Input name="campaignid" type="hidden" onChange={e => setCampaignid(e.target.value)} />
                

It's working fine... the value field is being filled correctly with the URL parameters.

My problem surges at the following step... When I submit the form, the campaingid value disappears.

See my variable state:

const [campaignid, setCampaignid] = useState('')

When I submit the form, it retrieves blank data at campaigning

I think there is a mistake in the usage of onChange events. Idk...

Someone can help me?

Full code: https://github.com/stridesdigital/ac-chakraUI-angelina-cortinas/blob/main/src/components/Forms/heroform.tsx

Answer 1

move your submit function below useState 's

First rule of hooks:

Only Call Hooks at the Top Level https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

also if it doesn't work then wrap submit in useCallback refer: https://reactjs.org/docs/hooks-reference.html#usecallback