Concatenate the names of yup and react-hook-form when using an array of objects

Question

I am trying to combine react-hook-form with via register ;yup pattern was connected, but an error was encountered. My goal is to pass a name like exampleArray${index}.exampleProp since I will be rendering the input box in a loop.

A simple example:

import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = yup.object().shape({
  exampleArr: yup.array().of(
    yup.object().shape({
      exampleProp:yup.string()
    })
  )
});

type FormValues ​​= yup.InferType<typeof schema>;

export default function App() {
  const methods = useForm<FormValues>({
    resolver: yupResolver(schema)
  });
  return (
    <input type="text" {...methods.register("exampleArr[0].exampleProp")} /> // error here
  );
}

Parameter of type '"exampleArr[0].exampleProp"' cannot be assigned to type '"exampleArr" | exampleArr.${number} | exampleArr.${ number}.exampleProp'.

Example in codesandbox: https://codesandbox.io/s/funny-orla-97p8m2?file=/src/App.tsx

Answer 1

You need to tell what the type of exampleArr.${number} is:

For example, I just tested this on your sandbox and it worked perfectly:

<input type="text" {...methods.register("exampleArr[0].exampleProp" as any)} />