Set default value Field Array in Formik

7
votes

I'm using Formik to build my form.

My form has three text area and 1 select dropdown

For select dropdown, I used IssueSelect (as a FieldArray in Formik).

And IssueSelect, I used for both Create and Update Form.

My component looks like this:

const IssueSelect = ({ values }) => (


<FieldArray
    name="issues"
    render={({ remove, insert, push }) => (
      <div>
        {values.issues && values.issues.length > 0 ? (
          values.issues.map((iselected, index) => (
            <div key={uuidv1()}>
              <div>
                <Field
                  value={iselected.id}
                  component="select"
                  name={`issues.${index}`}
                >
                  {issues.map(issue => (
                    <option key={issue.id} value={issue.id}>
                      {issue.name}
                    </option>
                  ))}
                </Field>
              </div>

              <div>
                <button onClick={() => remove(index)}>
                  <b> - </b>
                </button>
                <button onClick={() => insert(index, issues[0].id)}>
                  <b> + </b>
                </button>
              </div>
            </div>
          ))
        ) : (
          <button onClick={() => push(issues[0].id)}>
            <b> + </b> Add new issue
          </button>
        )}
      </div>
    )}
  />
);

export default IssueSelect;

In Create Form, everything is work well.

But Update Form, I passing initialValue to IssueSelect component, it showed correctly data that I've passed. But I cannot change the option in the select box.

I've set default value by passing value={iselected.id} When I pass this props, In Create Form. It's doesn't work anymore.

You can check my codesand box to see exactly what I mean: https://codesandbox.io/s/rr1o8x3ppq

Thank You in Advance.

2
javascriptreactjsformik

2 Answers

0
votes
<Field 
   component="select" 
   name="select" 
   className={'form-control'}
   variant="outlined">

    <option value='one' >One</option>
    <option value='two'>Two</option>
    <option value='three'>Three</option>

</Field>

The option that you want set as the default option, need to write for first option tag. It will set as default option. It worked.

0
votes
    const MySelect = ({ label,list, ...props }) => {
    const [field, meta] = useField(props);
    return (
        <>
            <Label for={props.id || props.name}>{label}</Label>
            <select {...field} {...props} >
                {list.map((e, i)=> <option key={i} value={e}>{e}</option>)}
            </select>
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}

        </>
    )
  };

Use it like this

            <Formik initialValues={{
            period: data.period
          }}
        >
            <Form >
            <MySelect label="period"  list={[ 'DAY','WEEK','MONTH']} name="period"/>
            </Form>
        </Formik>

where data is something you might be fetching from somewhere before showing this form.