Looking for a better solution

[minhth-1529]

❓I am implementing a feature update user information by formik. When componentDidMount I use setFieldValue() to each field but it not working, and I found settimeout but I felt that some trick. Please give me some a better solution.

`componentDidMount() {
const { setFieldValue, location } = this.props;
const stringObject = queryString.parse(location.search);

    setTimeout(() => {
        setFieldValue('locationFrom', stringObject.from);
        setFieldValue('locationTo', stringObject.to);
        setFieldValue('startTime', moment(stringObject.startTime));
        setFieldValue('slot', stringObject.slot);
    }, 1);
}`

[johnrom]

It looks like you're trying to update the value within formik on mount. Instead, you can initialize formik with those values from the very beginning by lifting your state up a bit.

const selectInitialValues = (values) => ({
  locationFrom: values.from,
  locationTo: values.to,
  startTime: moment(values.startTime),
  slot: values.slot, 
)};

// props might have values from redux or something else
const MyForm = (props) => (
    <Formik initialValues={selectInitialValues(props.initialValues)} {...restOfFormikProps}>
        <Field name="locationFrom" /> // will have value returned from selectInitialValues(props.initialValues)
    </Formik>
);

Note you can add <Formik enableReinitialize={true} /> to re-initialize the form once props have changed in response to a Redux request, but you'll want to make sure it only happens once or twice because your form will re-render each time props change.

If you create a sandbox where you've tried this with the class-based version, I can fork it and describe how that would work. Writing with classes is a bit verbose for answering a question, though, so I've described it with function components. Hope it helps!