As I work with react hooks forms, I am facing a challenge in setting default values for a form generated by mapping over an array to output the inputs. After reducing the array into an object format like {name0:"fijs",name1:"3838"...}, manually passing this object as default values successfully populates the form inputs. However, when attempting to do this from the variable used in the reduce function, it fails to populate. I suspect this is due to it being undefined on the initial render. Even after trying to implement a useEffect hook, the issue remains unresolved.
The section of code causing trouble:
const test = formState?.reduce((obj, item, idx) => {
return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
}, {});
const { register, handleSubmit, errors } = useForm({
defaultValues: test,
});
console.log(test);
Below is the complete code snippet:
import { useQuery, gql, useMutation } from "@apollo/client";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { useForm } from "react-hook-form";
// Rest of the code...
UPDATE: Despite trying to use useEffect with a reset method from the api, the issue persists.
const { register, handleSubmit, errors, reset } = useForm();
useEffect(() => {
const result = test;
reset(result);
}, [reset]);
UPDATE: In an attempt to resolve the issue, I encapsulated the Form component separately but unfortunately, the problem still lingers.
Form.js
// Code snippet for Form component
index.js
// Remaining code logic in index file importing and utilizing the Form component