react-hook-form

👨‍👨‍👦 schema error parent level look up (#6869)

const validationSchema = object().shape({
  questions: array()
    .min(1, "Array cannot be empty")
    .of(
      object().shape({
        text: string().required("Some text is required")
      })
    )
});

function App() {
  const {
    control,
    formState: { errors },
    register
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(validationSchema),
    defaultValues: { questions: [ { text: 'test' } ] }
  });
  const { fields, remove } = useFieldArray({
    control,
    name: "questions",
  });
  console.log(errors);
  return (
    <form>
      {fields.map((question, questionIndex) => (
        <div key={question.key}>
          <input {...register(`questions[${questionIndex}].text`)} />

          <button type="button"
            onClick={() => {
              remove(questionIndex);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </form>
  );
}