How to properly check if an Array element was touched?

[filipetoyoshima]

❓Question

To render an error message, it is good to check if the field was touched. For example, using bootstrap classes, we do something like:

<div className='form-group'>
    <label htmlFor='email'>E-mail</label>
    <Field
        name='email'
        placeholder='maria.silva@email.com'
        className={`form-control ${
            touched.email && errors.email ? "is-invalid" : "" // Here's my check! <==
        }`}
    />
    <ErrorMessage
        component='div'
        name='email'
        className='invalid-feedback'
    />
</div>

And this works well in most cases, touched.email is yet undefined and JS is able to understand undefined as false. But it gets tricky when dealing with FieldArray.

The problem is when checking something like touched.email[index], well, undefined has no 'index' property. And it gets trickier when we have an array of objects, like touched.friends[index].name

I did some workarounds with try and catch blocks, but I believe that it is not the best option. Does the Formik have some proper way to deal with this?

And, a possible suggestion, isn't it a good idea to send false values when calling touched?

[arvinsim]

I also have the same problem with an array of objects touched.lineItems[index].units, touched.lineItems[index].price