Как создать несколько полей Formik через map?

Question

[Alexander]

Есть данные в виде объекта

type ContactsType = {
  github: string 
  vk: string 
  facebook: string 
  instagram: string 
  twitter: string 
  website: string
  youtube: string 
  mainLink: string 
}

, которые приходят с сервера. Я сделал перебор ключей объекта через map и создал всего одну форму, чтобы динамически подставлять ключи объекта, но я не понимаю как это можно сделать, ибо в name нужна строка, а в value нужен точный путь к объекту и ключу в initialState в формике, долго играюсь с этой мелочью, кто знает как это можно решить, отпишите пожалуйста, буду признателен

initialValues={{
          fullName: profile.fullName,
          lookingForAJob: profile.lookingForAJob,
          lookingForAJobDescription: profile.lookingForAJobDescription,
          aboutMe: profile.aboutMe,
          contacts: profile.contacts,
        }}

{Object.keys(profile.contacts).map((key, inx) => {
                  
                  return (
                    <React.Fragment>
                      <TextField
                        key={key}
                        className={classes.gutters}
                        margin='dense'
                        fullWidth
                        variant='outlined'
                        id='standard-basic'
                        // name={`contacts.${key}`}
                        label={key}
                        // value={values.contacts.}
                        onBlur={handleBlur}
                        onChange={handleChange}
                        // error={touched.contacts?.github && Boolean(errors.contacts?.github)}
                        // helperText={touched.contacts?.github && errors.contacts?.github}
                      />
                    </React.Fragment>
                  )
                })}

Пример с рабочей формой отдельного ключа :

<TextField
                  className={classes.gutters}
                  margin='dense'
                  fullWidth
                  variant='outlined'
                  id='standard-basic'
                  name='contacts.facebook'
                  label='facebook'
                  value={values.contacts.facebook}
                  onBlur={handleBlur}
                  onChange={handleChange}
                  error={touched.contacts?.facebook && Boolean(errors.contacts?.facebook)}
                  helperText={touched.contacts?.facebook && errors.contacts?.facebook}
                />

Answer 1

[Валерий]

{Object.keys(profile.contacts).map((key) => {
                  return (
                    <React.Fragment>
                      <TextField
                        key={key}
                        className={classes.gutters}
                        margin='dense'
                        fullWidth
                        variant='outlined'
                        id='standard-basic'
                        name={`contacts.${key}`}
                        label={key}
                        value={`values.contacts.${key}`}
                        onBlur={handleBlur}
                        onChange={handleChange}
                        error={`touched.contacts?.${key}` && Boolean(`errors.contacts?.${key}`)}
                        helperText={`touched.contacts?.${key}` && `errors.contacts?.${key}`}
                      />
                    </React.Fragment>
                  )
})}

Comments

[Alexander]

значение value захардкоджено, невозвожно изменить. value нужен такой путь value.contacts... без кавычек

[Валерий]

Исправил

<TextField
    key={key}
    className={classes.gutters}
    margin='dense'
    fullWidth
    variant='outlined'
    id='standard-basic'
    name={`contacts.${key}`}
    label={key}
    value={`contacts.${key}`}
    onBlur={handleBlur}
    onChange={handleChange}
    error={touched.contacts?.[key] && Boolean(errors.contacts?.[key])}
    helperText={touched.contacts?.[key] && errors.contacts?.[key]}
/>

[Alexander]

Я немного исправил value, оно работает отлично, вот только на error и helperText ругается typescript,
может знаете как это пофиксить?

{Object.keys(profile.contacts).map((key) => {
                  return (
                    <React.Fragment>
                      <TextField
                        key={key}
                        className={classes.gutters}
                        margin='dense'
                        fullWidth
                        variant='outlined'
                        id='standard-basic'
                        name={`contacts.${key}`}
                        label={key}
                        value={values.contacts[key]}
                        onBlur={handleBlur}
                        onChange={handleChange}
                        error={touched.contacts?.[key] && Boolean(errors.contacts?.[key])}
                        helperText={touched.contacts?.[key] && errors.contacts?.[key]}
                      />
                    </React.Fragment>
                  )
                })}