ReactJS Formik hidden field sending null value to server

I just used ran into this issue as well. My work around was to just add an initial value, and not even use a hidden field. The result was, in onSubmit(), the values object contained my hidden field key with the initialValues value.

I'd like to know if anyone knows of the correct way to go about this? My way seems a bit hacky?


Here is how i managed the hidden field value in Formik

Passed the setFieldValue as argument before the tage

{({ values, errors, touched, handleSubmit, setFieldValue , isSubmitting }) => (
<Form>
<div className="form-group has-feedback">
<input type="hidden" value="testing" name="hiddenField" />

Then I managed to changed it onClick method (can be used as required)

<button type="submit" className="btn btn-primary btn-block btn-flat" 
onClick={() => {setFieldValue("hiddenField", "yourValueHere OR dynamicVariable"); }} 
disabled={isSubmitting}>Register</button>

Tags:

Reactjs

Formik