Within my React functional component, I utilize Formik for form management and MaterialUI V5.10 for styling. The form includes TextField elements and a Canvas element.
I am encountering two issues...
Despite setting initial values in Formik, the TextFields do not display those values unless I use the 'defaultValue' property in the code below:
const initialValues = {
toEmail01: "<user>@xyz.co",
};
return (
<div>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
//enableReinitialize={false}
>
{({
submitForm,
handleBlur,
handleChange,
isSubmitting,
isValid,
dirty,
touched,
values,
errors,
}) => (
<Form>
<div>
<Grid item xs={2}>
<Item
sx={{
width: "50em",
height: "20em",
variant: "outlined",
border: "solid",
overflow: "scroll",
}}
>
<Typography variant="">
To
</Typography>
<Box
component="form"
sx={{
"& .MuiTextField-root": { m: 0, width: "75ch" },
}}
noValidate
autoComplete="off"
>
<div>
<TextField
id="toEmail01"
name="toEmail01"
//defaultValue={initialValues["toEmail01"]}
onChange={handleChange}
onBlur={handleBlur}
helperText={
touched.toEmail01 ? errors.toEmail01 : ""
}
error={
touched.toEmail01 && Boolean(errors.toEmail01)
}
margin="dense"
variant="standard"
fullWidth
/>
</div>
</Box>
</Item>
</Grid>
</div>
</Form>
)}
</Formik>
Another issue arises with a Canvas element on the Formik form that requires dynamic updates based on user input using the useState() hook. Each update causes a re-render of the entire component, refreshing the values of non-related TextInputs. I have tried enableReinitialize={false} and enableReinitialize with Formik without success in resolving this.