Passing methods through child components using React-Hook-Forms

Question

I am trying to use the register() method in my child component. But I am getting a Typescript Error saying: Expected 1-2 arguments, but got 0.

I am assuming I am passing the register method incorrectly?

Parent Component

type FormValues = {
  projectType: string;
};

const Parent = () => {
  const {
    register,
  } = useForm<FormValues>({ mode: 'all' });
  return (
    <Container>
      <FormBlock id="form">
        <fieldset>
          <ChildComponent props={register()}/>
        </fieldset>
      </FormBlock>
    </Container>
  );
};

Child Component

const ChildComponent = ({ props }) => {
  return (
    <InputField {...props.register('projectType')}></InputField
  );
};

In the parent component, your code is trying to call the register function and pass the return value as props rather than passing the function itself as a prop. — Calvin
– Calvin, Commented Jun 23, 2021 at 8:36
What is the best way to pass it though correctly? Using this.register? — danielrhodesy
– danielrhodesy, Commented Jun 23, 2021 at 20:32
By calling register you are not passing the function to ChildComponent but the return value. Also you wouldn't pass a prop props to a component. The arguments provided to ChildComponent are already the props and wrapped into an object. Just pass register={register}. — trixn
– trixn, Commented Jun 24, 2021 at 7:48

Joris · Accepted Answer · 2021-06-24 07:43:07Z

13

You've to update the following line to:

<ChildComponent props={register} />

You shouldn't call register, you've to remove the parenthesis

EDIT: thanks to Calvin

You've to edit the component:

<InputField {...props('projectType')}></InputField>

It's cleaner to rename props to register

<ChildComponent register={register} />

// Field
<InputField {...register('projectType')}></InputField>

edited Jun 24, 2021 at 7:43

answered Jun 23, 2021 at 21:31

Joris

2,83618 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

danielrhodesy Over a year ago

I changed register() to register. But I am having an error with the props argument in the child component. Tried doing (props) or ({props}) but Im getting: Parameter 'props' implicitly has an 'any' type.. Is this an issue due to me passing through a method ?

Calvin Over a year ago

You should probably pass it as <ChildComponent props={{register}} /> so that <ChildComponent> gets passed a prop called register. In <ChildComponent>, you should add the type of the <ChildComponent>'s prop object (an object with a property called register).

Calvin Over a year ago

Also, when doing curly braces in a function's argument list like that, you are destructuring the function's first argument and retrieving a property called props from it. So to get just register from the passed in props, you would do ({register}: ChildComponentProps).

Romas Bitinas · Accepted Answer · 2023-12-18 10:15:42Z

You can also pass props form properties to nested components with useForm, useFormContext and FormProvider.

You need to get form methods with useForm() in the parent component, wrap its content with <FormProvider> and fetch form methods from child components using useFormContext().

Code from official docs:

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

Link: https://www.react-hook-form.com/api/useformcontext/

Collectives™ on Stack Overflow

Passing methods through child components using React-Hook-Forms

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related