Validating formik field containing array of objects using Yup

Question

Sample code: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx

I'm attempting to build a form that will accept a Criteria array of Criterion objects that are of a specific type:

export interface Criterion {
  field: string,
  op: string,
  values: []
}

export interface Configuration {
  title: string,
  description: string,
  criteria: Criterion[],
}

So the Configuration object can have multiple Criterion used to define a web API query. I've got this far, but while yup correctly validates the array, when it gets to formik it seems to treat it as a string again, even though the types are defined (I think) correctly.

Here's an example of what I'm seeing, if you submit the form using an array like this as the criteria value:

[
  {
    "field": "createdOn",
    "op": "Equal",
    "values": [
      "2020-01-01"
    ]
  }
]

the formik value shows:

 "criteria": "[
    {
      \"field\": \"createdOn\",
      \"op\": \"Equal\",
      \"values\": [
        \"2020-01-01\"
      ]
    }
  ]"

Is there a way to get formik to treat this as an array of javascript objects instead of a string?

user_6108390 · Answer

You have to parse the value of criteria to JSON first (because it is a string from the textarea, not an object), then reassign it like this:

            let temp = { ...values };
            temp.criteria = JSON.parse(values.criteria);

Sample: https://codesandbox.io/s/zealous-northcutt-f0d8k?file=/src/App.tsx

Validating formik field containing array of objects using Yup

1 Answers