FieldArray within a FieldArray

[raufabr]

Hi everyone, I'm new to the community, I've been using Formik over the last few weeks and have been loving it!

Recently I've been trying to create a FieldArray within a FieldArray within Formik using React-Native and haven't found an example which would work for me.

Basically, my data structure would look like the following -

exercises : [
      {
	"description": "methodical",
	"id": 216,
	"title": "Senior Solutions Associate",
	"sets": [
			{ "reps": 10, "weight": 0, "duration": 10 },
			{ "reps": 10, "weight": 0, "duration": 10 }
	]
	},
]

Users would be able to edit, delete or push to both exercises and the sets arrays. Therefore I'm trying to create two Fieldarrays as the code below.

<FieldArray name="exercises">
	<View>
		{values?.exercises?.map(({ title, sets }, index) => (
			<View key={index}>
				<View style={styles.exerciseTitleContainer}>
					<BrightText style={styles.exerciseTitle}>{title}</BrightText>
					<FieldArray name="exercises.sets">
                                                  {({ remove }) => (
						<View>
                                                         {values?.exercises?.sets?.map((set, setIndex) => (
								<View key={setIndex}>
									<BrightText>Test</BrightText>
									<TouchableOpacity onPress={() =>remove(setIndex)}>
										<BrightText>Delete</BrightText>
									</TouchableOpacity>
								</View>
							))}
						</View>
							)}
					</FieldArray>
				</View>
			</View>
		))}
	</View>
</FieldArray>

I need the user to be able to edit, delete and add items to both exercises array and the sets array. Therefore I'm trying to nest the Sets FieldArray inside the exercises FieldArray.

Currently the data is getting passed through properly for the Exercises field array, but I can't seem to remove anything from the Sets fieldarray.

Any tips on how I could get this to work/design would be greatly appreciated! 💯