multiple fields with yup and react hook forms - reactjs

Question

I'm trying to do this with yup and react-hook-forms
For example, if I'm given an array of ids, then I would like to have a field for each id. The ids are random (i.e., we could have 4 ids or 100 ids). For now, I just want to see if all the input is filled (.required())
This is how I would handle validation without any libraries
export default function App(){
const [ids, setIds] = React.useState(arr1)
const inputValues = React.useRef({});
const handleSubmit = () => {
const { current: values } = inputValues;
console.log(values);
};
const validateInput = event => {
const { name, value } = event.target;
// validation done here
if(true){
inputValues.current[name] = value;
}
};
return (
<div>
<form onSubmit={handleSubmit}>
{ids.map(num => (
<input name={num} onChange={validateInput} required key={num} />
))};
<button type="submit">submit</button>
</form>
</div>
);
}
https://stackblitz.com/edit/react-ts-4jnfx2?file=App.tsx
Now how would I do this with yup and react hook forms to validate the input ?

Answer 1

As per the sandbox below, you can find an implementation with React Hook Form as shown here;
As it's pretty easy to follow from it's own documentation here, you don't need any other variables. So that I made it a bit simplification and only used necessary handleSubmit function, instead of validateInput and references.
import { useState } from "react";
import { useForm } from "react-hook-form";
export function App() {
const { register, handleSubmit } = useForm();
const [data, setData] = useState("");
const [ids] = useState(["1", "3", "40", "18"]);
return (
<form
onSubmit={handleSubmit((data) => {
console.log(data);
setData(JSON.stringify(data));
})}
>
{ids.map((num) => (
<input key={num} name={num} {...register(num, { required: true })} />
))}
<p>{data}</p>
<input type="submit" value="submit" />
</form>
);
}

Answer 2

Please check below code. I don't have experience with TypeScript so I have wrote it in JavaScript
App.js
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '#hookform/resolvers/yup';
import * as yup from 'yup';
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
const createSchema = (keys, valueSchema) => yup.object().shape(keys.reduce((acc, key) => ({ ...acc, [key]: valueSchema }), {}));
const mySchema = createSchema(arr1, yup.string().required());
const App = () => {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(mySchema),
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{arr1.map((item) => (
<div key={item} style={{ border: '1px solid black' }}>
<input {...register(`${item}`)} />
<p>{errors?.[item]?.message}</p>
</div>
))}
<input type="submit" />
</form>
);
};
export default App;