Как смапить массив вместе с объектом errors от Formik`а?

Question

[TheSerKat]

Как смапить так чтобы в className добавлялся класс если есть ошибка в объекте erorrs с конкретным именем который подставляет .map?

let fieldsContacts =[
        {id: 1, name: 'fullName'},
        {id: 2, name: 'aboutMe' },
    ]
<Formik>
 {({errors, touched => (
  <Form>
   {fieldsContacts.map(field =>
      <Field name={field.name} className={errors.field.name && touched.field.name && classes.errorField} id={field.name}/>
    )}
  </Form>
  )}
</Formik>

То есть хотелось бы чтобы результат был бы такой:

<Field name="fullName" className={errors.fullName && touched.fullName && classes.errorField} id="fullName"/>
<Field name="aboutMe" className={errors.aboutMe && touched.aboutMe && classes.errorField} id="aboutMe"/>

а так undefined у объекта errors нету же field.name

Answer 1

[Александр]

- errors.field.name
+ errors[field.name]

Также и для touched.

Comments

[TheSerKat]

А как быть если придет не просто строка, а объект и в нем еще свойство?

<Field
     className={errors[contacts.github] && touched[contacts.github]  && classes.errorField}
         name="contacts.github" validate={required}/>
     <ErrorMessage name={'contacts.github'}>{msg => <p>{msg}</p>}</ErrorMessage>

Сам error изначально пустой у него contacts undefined.
Это какой должен быть синтаксис чтобы дождаться значения errors.contacts.github ?

[Александр]

TheSerKat, Создайте отдельный компонент для рендера поля. https://codesandbox.io/s/qna-q954489-wzo4u