I got component structure like this. The actual code is not like this I am just trying to help you visualize.
<EditAssessment><AssessmentForm><AssessmentScheduleCronWeekField></AssessmentScheduleCronWeekField></AssessmentForm></EditAssessment>
The thing is when I pass the value from EditAssessment
to child component, useformMik
is changing the value.
EditAssessment component// logging the initial value {console.log( (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[ Number(assessmentIndex) ] )} {loading ? (<Loading size="large" label="Saving..." /> ) : (<AssessmentForm initialValues={ (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[ Number(assessmentIndex) ] as Assessment } onSubmit={onSubmit} onCancel={onDone} /> )}
Here is the AssessmentForm component
import { Field, FormikProvider, useFormik } from 'formik';export const AssessmentForm = ({ initialValues, onSubmit, onCancel,}: AssessmentFormProps) => { const [scheduleType, setScheduleType] = useState('empty'); const formik = useFormik({ initialValues, onSubmit, validationSchema, }); // *** THE VALUE CHANGE HERE, THIS IS IMPORTANT *** console.log(initialValues.schedule); console.log(formik.values.schedule); return (<FormikProvider value={formik}><Form data-cy="assessment-form" onSubmitCapture={formik.handleSubmit}> {/* Assessment Questionnaire ID Field */}<Field name="questionnaireId" component={AssessmentQuestionIdField} /><div>Hello</div> {/* Assessment Schedule Type Form */}<AssessmentScheduleTypeForm assessmentSchedule={initialValues.schedule} onTypeChange={setScheduleType} /><div>Hello 1</div> {/* Various Assessment Schedule Forms */} {(() => { let component = undefined; switch (scheduleType) { case 'oneTime': component = AssessmentScheduleOneTimeField; break; case 'cronWeek': component = AssessmentScheduleCronWeekField; break; } if (component !== undefined) { return <Field name="schedule" component={component} />; } return (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<p>Select a Schedule Type</p>} /> ); })()}<AssessmentFormScheduleDescription schedule={initialValues.schedule} /> {/* Combined Form using `useFormik() */}</Form></FormikProvider> );};
As you can see there are two console.log
statement places 1 in EditAssement
and in
AssessmentForm`
The value passing to the AssessmentForm
change automatically and idk why
Here is a screen shot
These console.log when I reach to the path. If you line 53 console.log is coming from useformMik
and that one is updating the value