How to prepopulate a react formik form

Question

I have a table tha stores Students with an edit buttom tha opens a formik form.

const EditStudentFrom = (props) => (
  
  
  <Formik
    initialValues={{studentId:"", firstName: "", lastName: "", email: "", gender: "" }}
    validate={(values) => {
      const errors = {};

      if (!values.firstName) {
        errors.firstName = "First name required";
      }
      if (!values.lastName) {
        errors.lastName = "Last name required";
      }

      if (!values.email) {
        errors.email = " Email required";
      } else if (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
      ) {
        errors.email = "Invalid Email address";
      }

      if (!values.gender) {
        errors.gender = "Gender required";
      } else if (
        !["MALE ", "male", "female", "FEMALE"].includes(values.gender)
      ) {
        errors.gender = "Gender most be ( MALE , male , FEMALE, female )";
      }

      return errors;
    }}
    onSubmit={(student, { setSubmitting }) => {
      editStudent(student.studentId,student).then(() => {
      props.onSuccess();

        setSubmitting(false);
      });
    }}
  >
    {({
      values,

      errors,

      touched,

      handleChange,

      handleBlur,

      handleSubmit,

      isSubmitting,

      submitForm,
      isValid,

      /* and other goodies */
    }) => (
      <form onSubmit={handleSubmit}>
        
        <Input
          style={inputMargin}
          name="firstName"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.firstName}
          placeholder="First name"
        />

        {errors.firstName && touched.firstName && (
          <Tag style={tagStyle}>{errors.firstName}</Tag>
        )}
        <Input
          style={inputMargin}
          name="lastName"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.lastName}
          placeholder="Last name"
        />
        {errors.lastName && touched.lastName && (
          <Tag style={tagStyle}>{errors.lastName}</Tag>
        )}
        <Input
          style={inputMargin}
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.email}
          placeholder="Email"
        />
        {errors.email && touched.email && (
          <Tag style={tagStyle}>{errors.email}</Tag>
        )}
        <Input
          style={inputMargin}
          name="gender"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.gender}
          placeholder="Gender"
        />
        {errors.gender && touched.gender && (
          <Tag style={tagStyle}>{errors.gender}</Tag>
        )}

        <Button
          onClick={() => submitForm()}
          type="submit"
          disabled={isSubmitting | (touched && !isValid)}
        >
          Submit
        </Button>
      </form>
    )}
  </Formik>
);
   
     

export default EditStudentFrom;

the eddit buttom on my table sets the visible property on a Modal to true to open the form

       {
          title:"",
          Key:"buttom",    
          render:(value, student)=>(<Button onClick={this.openEditStudentModal}                 
         >Edit</Button>)
                           
        }

how do i set the initialValues of the form to be the values for the student in the same row as the edit buttom i really need the studentId so i can pass it to the back end like this

export const editStudent= (studentId,student)=> 
fetch(`http://localhost:1020/api/students/${studentId}`, {
  method: "PUT",
  body: JSON.stringify(student),
  headers: {
    "Content-Type": "application/json",
  },
});

Answer 1

In order to use the form for editing the students objects, you need to pass the student object as initialValues of the <Formik>component. Note that you'll probably have to set the enableReinitialize prop to true, so Formik can reset the form when the initialValues prop changes.