I just make a multi form with React + MUI + Formik + Yup
When I fill the second form and go next form and then back to second form console show the following error and also browser screen goes to white Console Error Image
and Here is the code of my second form
import { TextField, Button, Grid, FormHelperText } from "@mui/material";
import { Container } from "@mui/system";
import { FieldArray, Form, Formik, getIn } from "formik";
import * as Yup from "yup";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
const validationSchema = Yup.object().shape({
education: Yup.array().of(
Yup.object().shape({
institution: Yup.string().required("Insitution is required"),
degree: Yup.string().required("Degree is required"),
city: Yup.string().required("City is required"),
cgpa: Yup.number()
.typeError("CGPA must be a number")
.max(4.0, "CGPA cannot exceed 4.0")
.required("CGPA is Required"),
date: Yup.date().required("Date is required").typeError("Valid Date"),
})
),
});
const Education = ({ data, next, back }) => {
const handleSubmit = (vals) => {
next(vals);
};
return (
<>
<Formik
initialValues={data}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({
handleBlur,
handleChange,
errors,
touched,
values,
setFieldValue,
}) => (
<Form>
<FieldArray
name="education"
render={({ push, remove }) => (
<>
{values.education.map((_, index) => (
<Container maxWidth="md" key={index} sx={{ mt: "30px" }}>
<Grid container spacing={2}>
<Grid item lg={6} xs={12} sx={{ py: 4 }}>
<TextField
sx={{ width: "100%", backgroundColor: "white" }}
name={`education[${index}].institution`}
label="Institution"
value={values.institution}
onBlur={handleBlur}
onChange={handleChange}
error={
touched.education?.[index]?.institution &&
Boolean(errors.education?.[index]?.institution)
}
/>
{touched.education?.[index]?.institution &&
errors.education?.[index]?.institution && (
<FormHelperText
sx={{
color: "#d32f2f",
}}
>
{errors.education[index].institution}
</FormHelperText>
)}
</Grid>
<Grid item lg={6} xs={12} sx={{ py: 4 }}>
<TextField
sx={{ width: "100%", backgroundColor: "white" }}
name={`education[${index}].degree`}
label="Degree"
value={values.education[index].degree}
onBlur={handleBlur}
onChange={handleChange}
type="text"
error={
touched.education?.[index]?.degree &&
Boolean(errors.education?.[index]?.degree)
}
/>
{touched.education?.[index]?.degree &&
errors.education?.[index]?.degree && (
<FormHelperText
sx={{
color: "#d32f2f",
}}
>
{errors.education[index].degree}
</FormHelperText>
)}
</Grid>
<Grid item lg={6} xs={12} sx={{ py: 4 }}>
<TextField
sx={{ width: "100%", backgroundColor: "white" }}
name={`education[${index}].city`}
label="City"
value={values.education[index].city}
onBlur={handleBlur}
onChange={handleChange}
type="text"
error={
touched.education?.[index]?.city &&
Boolean(errors.education?.[index]?.city)
}
/>
{touched.education?.[index]?.city &&
errors.education?.[index]?.city && (
<FormHelperText
sx={{
color: "#d32f2f",
}}
>
{errors.education[index].city}
</FormHelperText>
)}
</Grid>
<Grid item lg={6} xs={12} sx={{ py: 4 }}>
<TextField
sx={{ width: "100%", backgroundColor: "white" }}
name={`education[${index}].cgpa`}
label="cgpa"
value={values.education[index].cgpa}
onBlur={handleBlur}
onChange={handleChange}
type="text"
error={
touched.education?.[index]?.cgpa &&
Boolean(errors.education?.[index]?.cgpa)
}
/>
{touched.education?.[index]?.cgpa &&
errors.education?.[index]?.cgpa && (
<FormHelperText
sx={{
color: "#d32f2f",
}}
>
{errors.education[index].cgpa}
</FormHelperText>
)}
</Grid>
<Grid item lg={6} xs={12} sx={{ py: 4 }}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Select Date"
format="MM/DD/YYYY"
name={`education[${index}].date`}
sx={{ width: "100%", backgroundColor: "white" }}
value={values.education[index].date}
onBlur={handleBlur}
onChange={(value) => {
const year = value.year();
const month = String(
value.month() + 1
).padStart(2, "0");
const day = String(value.date()).padStart(
2,
"0"
);
const formattedDate = `${year}-${month}-${day}`;
setFieldValue(
`education[${index}].date`,
formattedDate
);
}}
slotProps={{
textField: {
error: Boolean(
getIn(errors, `education[${index}].date`) &&
getIn(touched, `education[${index}].date`)
),
helperText: (
<FormHelperText
sx={{
// color: "#d32f2f",
fontSize: "12px",
backgroundColor: "transparent",
margin: "0",
}}
>
{getIn(
errors,
`education[${index}].date`,
""
)}
</FormHelperText>
),
},
}}
/>
</LocalizationProvider>
</Grid>
{values.education.length > 1 && (
<Grid item>
<Button
type="button"
variant="outlined"
onClick={() => remove(index)}
>
Remove
</Button>
</Grid>
)}
{index === values.education.length - 1 && (
<Grid item>
<Button
type="button"
variant="contained"
onClick={() =>
push({
institution: "",
degree: "",
city: "",
cgpa: "",
date: null,
})
}
>
Add More
</Button>
</Grid>
)}
</Grid>
</Container>
))}
</>
)}
/>
<Container maxWidth="md" sx={{ pt: "16px" }}>
<Grid container>
<Grid
item
xs={12}
sx={{
display: "flex",
justifyContent: "end",
gap: "20px",
}}
>
<Button type="button" variant="outlined" onClick={back}>
Back
</Button>
<Button type="submit" variant="contained">
Next
</Button>
</Grid>
</Grid>
</Container>
</Form>
)}
</Formik>
</>
);
};
export default Education;
So I want to remove the error and fix the issue and I just search about it but not get the proper solution.