import { useEffect } from 'react'; import { differenceInYears } from 'date-fns'; import { Field, useFormikContext } from 'formik'; import { Number } from '../../../components/Fields'; import { Fieldset } from '../../../components/Formik'; const Age = () => { const { values, setFieldValue } = useFormikContext(); useEffect(() => { if (values.dateOfBirth) { let age = differenceInYears(Date.now(), new Date(values.dateOfBirth)); if (age * 1 < 0) { age = 0; } setFieldValue('age', age); } }, [values.dateOfBirth]); return ( <Fieldset name="age" label="Age" help="Computed from your date of birth"> <Field id="age" name="age" as={Number} readOnly /> </Fieldset> ); }; export default Age;