setErrors can not set nested field errors

[vishalgheravada]

Bug report

i have a component in form like this: <Field name="detail.firstName" />
I get errors from api as below:
{'detail.firstName': 'some error msg', 'type': 'some error msg'}
setErrros from submit function only sets type msg not firstName.
I can only achieve this by using setFieldError in loop.
Also, I can see formik context is getting updated too.

is there any way I can do that without using a loop?

Your environment

Software	Version(s)
Formik	2.2.9
React	16.14.2
TypeScript	3.9.7
Browser	Chrome
npm/Yarn	6.14.14
Operating System	windows

[mfaheemakhtar]

@vishalgheravada , can you share a codesanbox link or something similar?

[erend]

I have the same issue.
setErrors({ 'parent.child': 'error msg' }) do nothing.

[sijad]

using object worked for me:

setErrors({ parent: { child: 'error msg' } });

[KatiaZakharina]

If you are faced with a multi-level nested field, one possible solution is to convert the error object as follows
{ 'a.b.c': 'error msg' } => { a: { b: { c: 'error msg' } } } using Lodash:

function transformDotNotationObject(obj) {
  return _.transform(obj, (result, value, key) => {
    _.set(result, key, value);
  }, {});
}

[charanjit-singh]

import { ErrorMessage, Field, useFormikContext } from 'formik'
import React from 'react'
import { ServiceFormValues } from '.'

function RentAgreement() {
    const { values, setErrors, setTouched } = useFormikContext<ServiceFormValues>()
    React.useEffect(() => {
        if (values?.configuration?.rentAgreement?.agreementDate) {
            console.log(
                'values?.configuration?.rentAgreement?.agreementDate',
                values?.configuration?.rentAgreement?.agreementDate
            )
            const agreementDate = new Date(values.configuration.rentAgreement.agreementDate)
            const today = new Date()
            if (agreementDate > today) {
                setTouched({
                    configuration: {
                        rentAgreement: {
                            agreementDate: true
                        }
                    }
                }, true)
                setErrors({
                    configuration: {
                        rentAgreement: {
                            agreementDate: 'Agreement date cannot be in future'
                        }
                    }
                })
            }
        }
    }, [values?.configuration?.rentAgreement?.agreementDate, setErrors, setTouched])

    return (
        <div>
            <Field name='configuration.rentAgreement.agreementDate' type='date' className='border border-gray-300 rounded-lg p-2 mt-2' />
            <ErrorMessage name='configuration.rentAgreement.agreementDate' component='div' className='text-red-500 text-sm' />
        </div>
    )
}

export default RentAgreement

Not working for me