How to set initialValues with api data in formik

17 Views Asked by At
const url = 'https://url/api/v1/students/'

function EditSingleStudent() {

    const { data, isLoading:isApiLoading, error:isApiError } = useApi(`${url}/${id}`)
    const {classLists, isLoading, error} = useGetClasses();

    const formik = useFormik({
        initialValues: {
            studentId: '',
            name: '',
            profile: '',
            dateOfBirth: '',
            gender: '',
            bloodGroup: '',
            email: '',
            phone: '',
            country: 'Bangladesh',
            username: '',
            password: '',
            fatherName: '',
            motherName: '',
            fatherProfession: '',
            motherProfession: '',
            fatherPhone: '',
            fatherNID: '',
            motherPhone: '',
            motherNID: '',
            classLevel: '',
            section: '',
        },
        validationSchema: Yup.object().shape({
            studentId: Yup.string(),
            name: Yup.string(),
            profile: Yup.string(),
            dateOfBirth: Yup.date(),
            gender: Yup.string(),
            bloodGroup: Yup.string(),
            email: Yup.string().email('Invalid email format'),
            phone: Yup.string(),
            country: Yup.string(),
            username: Yup.string(),
            password: Yup.string(),
            fatherName: Yup.string(),
            motherName: Yup.string(),
            fatherProfession: Yup.string(),
            motherProfession: Yup.string(),
            fatherPhone: Yup.string(),
            fatherNID: Yup.string(),
            motherPhone: Yup.string(),
            motherNID: Yup.string(),
            classLevel: Yup.string(),
            section: Yup.string(),
          }),
          enableReinitialize: true,
        onSubmit: async (values, {resetForm}) => {

            try {
                setLoading(true)

                if (!values.name) {
                    toast.error("Please enter a name for the student.");
                    return; // Prevent form submission if name is empty
                }
                
                console.log("Values: ", values)
                        
                const headers = {
                    "Authorization": authHeader,
                    'Content-Type': 'multipart/form-data',
                }
                
                const response = await axios.put(`https://url/api/v1/students/update/${id}`, values, {headers: headers});

                console.log('Registration successful:', response.data);
                toast(response.data.message)

                if (response.status === 200) {
                    // Reset the form after successful submission
                    setLoading(false)
                    resetForm();
                } else{
                    setLoading(false)
                }
                
            } catch (error) {
                // Handle errors
                console.error('Error:', error);
                toast(error.message)
                setLoading(false)
            }
        }
    });

    useEffect(() => {
        if (!isApiLoading && data) {
          formik.setValues({
            studentId: data.studentId || '',
            name: data.name || '',
            profile: data.profile || '',
            dateOfBirth: data.dateOfBirth || '',
            gender: data.gender || '',
            bloodGroup: data.bloodGroup || '',
            email: data.email || '',
            phone: data.phone || '',
            country: data.country || 'Bangladesh',
            username: data.username || '',
            password: data.password || '',
            fatherName: data.fatherName || '',
            motherName: data.motherName || '',
            fatherProfession: data.fatherProfession || '',
            motherProfession: data.motherProfession || '',
            fatherPhone: data.fatherPhone || '',
            fatherNID: data.fatherNID || '',
            motherPhone: data.motherPhone || '',
            motherNID: data.motherNID || '',
            classLevel: data.classLevel?._id || '',
            section: data.section?._id || '',
          });
        }
      }, [isApiLoading, data]);

Here I am sending the name but still, it's not sending over api. and also is there any better way to initialize the initialValues in formik and to merged it with touched values? The form is not submitting at all. I don't know why. any help please?

This code I want to use to uplaod profile information so the untouched field should be as it is and the upadated values should be added to the database but it's not submitting the form at all it says name path is require when I try to submit the form. I don't know why

0

There are 0 best solutions below