Formik is Not Rendering Initial Values

Viewed 34

I am using Formik for form submission in my React Project.

const initialValues =
    submittedAssignment !== undefined
      ? {
          comments: submittedAssignment?.comments,
          mk1: mKeys[0],
          mk2: mKeys[1],
          mk3: mKeys[2],
          mk4: mKeys[3],
          mk1Num: submittedAssignment?.mk1Num,
          mk2Num: submittedAssignment?.mk2Num,
          mk3Num: submittedAssignment?.mk3Num,
          mk4Num: submittedAssignment?.mk4Num,
        }
      : {
          comments: "",
          mk1: "",
          mk2: "",
          mk3: "",
          mk4: "",
          mk1Num: 0,
          mk2Num: 0,
          mk3Num: 0,
          mk4Num: 0,
        };

  console.log(initialValues);

return(
<Formik
          initialValues={initialValues}
          validationSchema={Yup.object({
            comments: Yup.string().required(),
            mk1Num: Yup.number().positive().required().max(5),
            mk2Num: Yup.number().positive().required().max(5),
            mk3Num: Yup.number().positive().required().max(5),
            mk4Num: Yup.number().positive().required().max(5),
          })}
          onSubmit={async (values, { setErrors, setSubmitting }) => {
            try {
              values = testFunction(values);
              console.log(values);
              const totalGrade =
                values.mk1Num + values.mk2Num + values.mk3Num + values.mk4Num;
              const response = await updateSubmittedAssignment(
                courseId,
                assignmentId,
                values,
                totalGrade,
                studentId
              );
              if (response.data.data === false)
                setErrors({ err: "Error Submitting. Please contact tech" });
              else {
                setSubmitting(false);
                history.push(
                  `/submittedAssignments/${courseId}/${assignmentId}`
                );
              }
            } catch (error) {
              setErrors({ err: error.message });
            }
          }}
        >
          {({ isSubmitting, submitForm, isValid, errors }) => (
            <Form className="ui form">
              <TextArea
                name="comments"
                placeholder="Enter Comments Here"
                rows={10}                
              />
              <Select
                name="mk"
                placeholder="Select Marking Key"
                options={markingKeys}
                onChange={handleMk}
              />
              <br />
              {mKeys.length > 0 && (
                <Grid>
                  <Grid.Column width={14}>
                    <TextInput name="mk1" id={1} value={mKeys[0]} />
                    <TextInput name="mk2" id={2} value={mKeys[1]} />
                    <TextInput name="mk3" id={3} value={mKeys[2]} />
                    <TextInput name="mk4" id={4} value={mKeys[3]} />
                  </Grid.Column>
                  <Grid.Column width={2}>
                    <TextInput name="mk1Num" type="number" />
                    <TextInput name="mk2Num" type="number" />
                    <TextInput name="mk3Num" type="number" />
                    <TextInput name="mk4Num" type="number" />
                  </Grid.Column>
                </Grid>
              )}

              {errors.err && (
                <Label
                  basic
                  color="red"
                  style={{ marginBottom: 10 }}
                  content={errors.err}
                />
              )}
              <br />
              <Button
                loading={isSubmitting}
                disabled={!isValid || isSubmitting}
                type="submit"
                fluidsize="large"
                color="teal"
                content="Submit"
                onClick={submitForm}
              />
            </Form>
          )}
        </Formik>
)

Till yesterday, setting the name property in the TextArea and TextInput, the same as the field in the initialValues object was enough to display the initital values. But i dont know what happened, the initial values are not showing up, although when i log them, they have correct values.

Any help is appreciated. Thanks

1 Answers

Try adding enableReinitialize to Formik.

<Formik
  enableReinitialize
  ...

You may have a case where the initialValues values get updated only after the first render. On the first render Formik takes the initialValues as they are, so if the values didn't get updated yet you will not see them in the form fields.

SOURCE: https://formik.org/docs/api/formik#enablereinitialize-boolean

Related