This is my component definition:
<DateField
name={formElement.name}
type="date"
label={formElement.name}
onChange={(date) => formik.setFieldValue(formElement.name, date)}
value={formik.values[formElement.name] || null}
onBlur={blurHandler}
className={classes.flexGrow}
// defaultValue={dataMatchHandler(formElement.name) || ''}
minDate={doj}
maxDate={Date('1/1/2023')}
error={formik.touched[formElement.name] && Boolean(formik.errors[formElement.name])}
helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
/>
Now when the value changes to below minDate error is triggered fine, but I also want to display a helper text, how do I do that?
My suggestion is that you can try using TextField so you can use helperText.
Here is the example you can try:
<TextField
name={formElement.name}
type="date"
label={formElement.name}
onChange={(date) => formik.setFieldValue(formElement.name, date)}
value={formik.values[formElement.name] || null}
onBlur={blurHandler}
className={classes.flexGrow}
helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
/>