React Formik Default value

Question

I am using React formik. I have a dropdown select option. Option is working fine but i want to have default value as Free from the dropdown. If i submit the form without click, it is giving me the option value as blank. Below is my code:

const defautValue="Free";
const options=["Premium","Gold","Free"]


<Field> 
  {(props: any)=>{
    const {field}=props;
    const defaultOption=<option key='default' value={defaultValue}>{defaultValue}</option>
    const option=options.map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})
    const selectOptions=[defaultOption,...option]
    return (
       <div>
       <select value={field.value}{...field}>{selectOptions}</select>
       </div>
         )
  }}
</Field>

Answer 1

try removing the manual setting of the defaultOption, selectOptions, and use either the formik.values, or form.value, and set the defaultValue of a component using the initialValues of the Formik component:

<Formik
  initialValues={{selectedOption: "Free"}: YourFormData}
  onSubmit={(values, actions) => {console.log(values, actions)}}
>
  {formik => (
    <Form translate="yes">
      <Field name="selectedOption">
          {({ form, field }: FieldProps<YourFormData>) => {
          const options=["Premium","Gold","Free"].map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})    
          return (
             <div>
                 <select {...field}>{options}</select>
             </div>
               )
        }}
      </Field>
    </Form>
    )}
</Formik>

the {...field} spread operator of field already has the "value" added

<Field name="selectedOption"> automagically connects the selectedOption formik field up to the <select> element, including onChange, onBlur, touched, etc.

Or you can also use as for example:

<Formik
    initialValues={{selectedOption: 'Free'}}
    onSubmit={(values, actions) => {
        setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
        }, 1000);
    }}>{(props: FormikProps<any>) => (
    <Form>
        <Field as="select" name="selectedOption">
           {["Premium","Gold","Free"].map((i:string)=>(<option key={i} value={i}>{i}</option>))}
        </Field>
    </Form>
)}
</Formik>

docs:

• https://jaredpalmer.com/formik/docs/api/field

Answer 2

you can set enableReinitialize option to true

your formik hook

const formik = useFormik({
        enableReinitialize: true,
        initialValues: $yourState
})

Answer 3

<Formik

    enableReinitialize // missing piece!!
    initialValues={props.initialValues}

working here

Answer 4

You can add an option that is 'disabled' above the options that you are populating dynamically:

<Formik>
 <option disabled value="">(Make a Selection)</option>
 {(props: any)=>{
 //...

</Formik>

It will display as the first default option with a message of your choice, and the user won't be able to select it from the dropdown.