How to iterate through keys of object with Yup

Question

Could someone suggest best way to iterate through generically created form using Yup?

So in my application user can add infinite amount of small forms asking only for client name(required), surname and age. I used Formik to generically create them and validation runs only in the end during submission of all forms at once. The final format of values coming from Formik is:

 `` {
     0:{name:"Valentin", surname:"Ivanov", age:26}
     1:{name:"Sam"}
     ...}``

Therefore I need to iterate through every object and validate whether "name" field is not undefined(required) and has length more than 5 characters with Yup. But I struggle to find a way how to do so even after trying couple things with lazy(). I use Formik v1.5.8, Yup v0.28.1 and Typescript v3.6.2

Cheers

KBeDev KBeDev · Accepted Answer · 2020-07-13T21:30:08

I don't know Yup, but I'll suggest this code as a generic solution to iterate over objects:

const yourObject: any = {
  0: { name: 'Valentin', surname: 'Ivanov', age: 26 },
  1: { name: 'Sam' }
}

for (const propertyName in yourObject) {
  if (yourObject[propertyName]) {
    // Do anything with your object
    // For example:
    console.log(yourObject[propertyName].name);
  }
}

How to iterate through keys of object with Yup

1 Answers