Values are always arrays?!

[nedvice-sv]

I've got a question; I'm using formidableJS together with yup validation. Yup validation in TS is very handy since it gives you a schema / typehints based on what you want to validate:

const validatedBody = await yup.object({
        name: yup.string().required(validationMessages.required),
        age: yup.number().required(validationMessages.required),
}).validate(fields, {abortEarly: false});

const name = validatedBody.name; // This is typed and mention that its a string!
const age= validatedBody.age; // This is typed and mention that its a number!

Since v3 every value that is parsed by the form is an array. Therefor its impossible to use the piece of code above since it will fail immediately since the name is an array with strings and not a string.

So I've got 2 questions:

1. What is the reason of this change? (Can't find any info on this change)
2. How would you implement yup validation in this case? That I still have the proper validation and types per form submit?

[GrosSacASac]

1. To avoid type errors. before it was sometimes an array
2. Use the helper function firstValues to transform back to singular values

[nedvice-sv]

Thanks for your answer @GrosSacASac.
It is possible that some elements are arrays, this is why the [] was meant for. But I'll try to make it work.
But the firstValues option is interesting tho, I've got an option in my form which is multiple options possible. That is an array, the rest of the form are strings. With the firstValues it gives me always the first value back of the record thus also the first value of something that should have been an array. How would you go with that? 🤔

Edit:

I've found an issue with custom made arrays in the FormData. Not sure if thats correct behavior. I've got multidemensional arrays: (This is an example after logging the 'fields' that are being returned in the parse method.

'sections[0][20889998-acff-4d5a-a708-61fb3f751079][Step][order]': [ '0' ],
  'sections[1][bae4db8c-bd96-4f10-9465-b90c95bccdb9][Step][text]': [ '<p>test</p>' ],
  'sections[1][bae4db8c-bd96-4f10-9465-b90c95bccdb9][Step][order]': [ '1' ],
  'sections[2][f569ea8b-9d57-4037-8070-9c81f4bcc928][Image][order]': [ '2' ],
  'sections[0][20889998-acff-4d5a-a708-61fb3f751079][Step][files][]': [ '1688740910708-443742010.docx' ],
  'sections[1][bae4db8c-bd96-4f10-9465-b90c95bccdb9][Step][files][]': [ '1689320954071-406184949.jpeg', '1689320979941-284874652.png' ],
  'sections[2][f569ea8b-9d57-4037-8070-9c81f4bcc928][Image][files][]': [
    '1688738131666-165264871.png',
    '1689324344573-756989209.png',
    '1689325033894-719478793.png',
  ]

Some fields should be arrays (files) and some fields just a string (order, text, etc..) But I don't know the exact 'name' of the string because the UUID can be different every time. There for the firstValues helper isnt gonna work here.

[GrosSacASac]

If you want some to stay arrays you use the third argument exceptions from the helper function.
For the rest I think you can do it