Formik: Dot notation for fields

[32teeths]

Describe the bug
When using formik where the form name have object notation , It breaks. mapPropsToValues builds an object like {'person.name':'Person Name'} , handleChange does not seem to work fine .

I am using the component form-control ${props.errors[column.index] && props.touched[column.index] ? 'is-invalid' : ''}} type="text" placeholder={Enter ${column.name}} /> where column.path has a dot within , like 'menu.name' .

I tried passing the onChange custom using handleChange with first argument as the field name and second with the value , But it did not work .

---

• Formik Version: 0.11.11
• React Version:16.3.2
• Node Version:10.3.0
• Package Manager and Version:
  npm : 6.1.0

[sshmyg]

@32teeths mapPropsToValues in case of object yup type should includes within object.

mapPropsToValues = {
    person: { name: 'Person Name' }
}

[hoschi]

@sshmyg how comes yup into play here? If you want/need to separate keys which become HTML element ids you need some separator. E.g.:

{
  'billingInfo.firstName':'Max',
  'contactInfo.firstName':'Clementine',
}

While keeping the values object flat you are able to handle it the same way, no matter how the input/output should look like. This custom form fields are easier to implement as they don't need to handle different structures.

I hope this provides some details about the use case, at least mine.

[hoschi]

@jaredpalmer ?

[karbica]

@jaredpalmer ?

[hoschi]

@karbica How to handle nested objects are described here: https://jaredpalmer.com/formik/docs/guides/arrays

[italodeandra]

If anyone gets here while trying to do the opposite (having keys with dots instead of nesting) you should do like this:

<Field
  name="['owner.username']"
  label="Owner user name'"
/>

This is not documented. But I'm creating a PR. #2459