Formik - Yup validation depends of prev array field value

having the following schema:

let validationSchema = Yup.object({
modules: Yup.array(
      Yup.object({
        title: Yup.string()
          .required("A module title is required")
          .min(1, "A module title is required"),
        lessons: Yup.array(
          Yup.object({
            lessonTitle: Yup.string().required("A lesson title is required"),
            lessonType: Yup.array()
              .min(1, "Lesson type is required")
              .required("Lesson type is required"),
          })
        ),
      })
    )
      .min(1, "You must add at least one module")
      .required("You must add at least one module"),
})

there's a conditional validation I need to do, but wasn't able:

1. if the lessonType field which is an array includes de word "video" then I need to check if the field videoFile has the video attached otherwise an error message should be displayed below the videoFile field.
2. if the lessonType field includes de word "document" then I need to check if the field documentFile has a file attached otherwise an error message should be displayed below the documentFile field.

I tried some recommendations from similar questions here but nothing works, can someone here point me into the right direction?

the structure if the module with 2 lessons is like:

modules [
  {
    title: "module title", 
    lessons:[
      {lessonTitle:"video title", lessonType:["video"]}, 
      {lessonTitle:"document title", lessonType:["document"]}
    ]
  }
]

tried with
Yup.array().when(...) but doesn't work because im not sure how to apply the conditional if the field that I need to validate is an array.

The when method in Yup validation schema can be used for this kind of conditional validation, but since your lessonType is an array, it requires a bit more complex handling.

here's an example for adding complex handling inside your validationSchema you can add to lessons array:

lessonType: Yup.array()
        .min(1, "Lesson type is required")
        .required("Lesson type is required")
        .test('file-test', 'File required', function (value) {
          const { videoFile, documentFile } = this.parent;
          if (value.includes('video') && (!videoFile || videoFile.length === 0)) {
            return this.createError({ message: 'Video file required when lesson type is video' });
          }
          if (value.includes('document') && (!documentFile || documentFile.length === 0)) {
            return this.createError({ message: 'Document file required when lesson type is document' });
          }
          return true;
        }),
      videoFile: Yup.mixed(),
      documentFile: Yup.mixed(),

I have added videoFile and documentFile as mixed types to the schema and have used them inside the test function. The error message from this test will appear under the lessonType field, so you might need to adjust your error handling to display it under the respective file fields.

The this.parent property inside the test function refers to the parent object, which is the lesson object in this case. So this.parent.videoFile and this.parent.documentFile refer to the videoFile and documentFile of the current lesson object.

This will ensure that when the lessonType is video, the presence of videoFile is checked and likewise for document lessonType, the presence of documentFile is checked. If the respective file is not present, an error message will be generated.