Unable to access nested arrays with useFieldArray #10100
Replies: 2 comments
-
Please provide a codesandbox url to re-produce. No one can know what is the problem with only a code block of yup schema. |
Beta Was this translation helpful? Give feedback.
0 replies
-
For anyone else who comes upon this, it turns out that you cannot have an array of any datatype that is not an object. An array of Enums will not work. An array of an object with a key that is an enum will work. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello all, I've done a good bit of digging, including following this example as a guide https://codesandbox.io/s/react-hook-form-js-forked-ugl5s?file=/src/App.js , but have been unable to achieve the following. Please let me know what I'm doing wrong!
Goal: Create a form that can render multiple questions, each with multiple answer options.
Problem: I can't seem to access individual questions' answer options.
I'm using yup for validation and have defined my schemas as follows:
const AssessmentSchema: yup.SchemaOf<Assessment> = yup.object().shape({ questions: yup.array().of(QuestionSchema).optional() });
const QuestionSchema: yup.SchemaOf<Question> = yup.object().shape({ type: yup .mixed() .oneOf(Object.values(QuestionTypes)) .required('Question type is required'), prompt: yup.string().required('Question prompt is required'), options: yup.array().of(ChoiceOptionSchema).required('Options are required') });
const ChoiceOptionSchema: yup.SchemaOf<ChoiceOption> = yup.object().shape({ points: yup.number().required('Points are required'), flag: yup.boolean().required('Flag is required'), text: yup.string().required('Text is required') });
Then I try to access options like this:
const { fields: questionOptions } = useFieldArray({ control: control, name:
questions.${questionIndex}.options, keyName: 'questionOptionId' });
But I get this error
Type '
questions.${number}.options' is not assignable to type ' "questions"'.ts(2322)
Anyone know what could be going on here?
Beta Was this translation helpful? Give feedback.
All reactions