ReactJS Formik hidden field sending null value to server

Question

I am new to React i am using FormIK which is posting Form data fine unless i add a hidden field into it.

<Field type="hidden" className="form-control" name="hiddenField" /> 

When i post form it sends the Null value of hidden field Also i have provided initial values to Formik

<Formik initialValues={{
first_name:'',last_name:'',username:'',email:'',password:'',
password_confirmation:'',distributor:'',phone_number:'',address:'',country:'',
state:'',city:'',zip_code:'',hiddenField:''
}} >

Is there any thing missing ?

Answer 1

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?

Answer 2

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>