Cuando envío {...register(name)} a mi componente de entrada con el formulario de enlace, aparece un error, pero cuando lo envío como {...register("fullname")} no recibe ningún error. No puedo usar algo como ("fullname") porque lo estoy enviando usando la función de mapa.
registro.tsx
import { Form, Input, PrimaryButton } from "components"; import { LoginRegisterLayout } from "layouts"; import { formTypes } from "constants/layouts/loginRegisterLayout"; import { getFormFields } from "constants/pages/register"; import { FormFieldType } from "utils/formFieldType"; import { useForm, SubmitHandler } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; type Inputs = { fullname: string; email: string; password: string; passwordConfirmation: string; }; const Register = () => { const { register, handleSubmit, watch, formState: { errors }, } = useForm<Inputs>(); const onSubmit: SubmitHandler<Inputs> = data => console.log(data); return ( <LoginRegisterLayout formType={formTypes.REGISTER} headTitle="Register"> <form onSubmit={handleSubmit(onSubmit)}> <> {getFormFields.map( ( { id, name, label, placeholder, type, passwordField, }: FormFieldType, index: number ) => ( <Input {...register(name)} label={label} id={id} name={name} key={index} placeholder={placeholder} type={type} passwordField={passwordField} /> ) )} <PrimaryButton size="xl" disabled={false}> Confirmation </PrimaryButton> </> </form> </LoginRegisterLayout> ); }; export default Register;He adjuntado el error que obtuve como una imagen a continuación.
Intenta definir un tipo como este
{getFormFields.map( ( { id, name, label, placeholder, type, passwordField, }: FormFieldType, index: number ) =>{ const nam : Inputs = name return( <Input {...register(nam)} label={label} id={id} name={name} key={index} placeholder={placeholder} type={type} passwordField={passwordField} /> ) } )}