[Solved]-How do you update Formik initial values with the react context api values after an AJAX request?-Reactjs

If you are using useFormik (formik hooks),

add the enableReinitialze prop on to the configuration object.

 import React from 'react';
 import { useFormik } from 'formik';
 
 const SignupForm = ({ newInitValues }) => {
   const formik = useFormik({
     initialValues: newInitValues || {
       firstName: '',
       lastName: '',
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
     enableReinitialze: true,
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="firstName">First Name</label>
       <input
         id="firstName"
         name="firstName"
         type="text"
         onChange={formik.handleChange}
         value={formik.values.firstName}
       />
       <label htmlFor="lastName">Last Name</label>
       <input
         id="lastName"
         name="lastName"
         type="text"
         onChange={formik.handleChange}
         value={formik.values.lastName}
       />
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />
       <button type="submit">Submit</button>
     </form>
   );
 };

According to official github issue from Formik you should add enableReinitialize prop: https://github.com/formium/formik/issues/811#issuecomment-410813925

You should set the enableReinitialize prop.

<Formik
  initialValues={{ email: context.email, username: context.username }}
  enableReinitialize