Using react-hook-form in React with Typescript in child component

Question

I am using a basic example of the react-hook-form library and even after looking up the documentary, I do not know how to pass the data from the form to another component. Here is my form component:

import { useForm, SubmitHandler } from "react-hook-form";

type FormInputs = {
    minimalFrequency: number;
    maximialFrequency: number;
  };

// const onSubmit: SubmitHandler<FormInputs> = data => console.log(data);

export default function BasicUsage() {
  const { register, formState: { errors }, handleSubmit, getValues } = useForm<FormInputs>({
    defaultValues: {
        min: 250,
        max: 8000,
      }
  });
  const onSubmit = (data: any) => {
    console.log(data);
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("minimalFrequency", { required: true })} />
      {errors.minimalFrequency && "Only numbers are allowed"}
      <input {...register("maximialFrequency", { required: true })} />
      {errors.maximialFrequency && "Only numbers are allowed"}
      <input type="submit" />
    </form>
  );
}

I would want to get the min and max values, in form of the given data object, of the user after they pushed the "submit" button and I just can't get my head around how it works.

My main component is a quite large class component, and I read that it might not work because react-hook-form needs a functional component. If true, is there a way to still use my class component somehow?

UPDATE: Added the parent component

import { useState } from "react";
import React from "react";
import BasicUsage from "./BasicUsage"

type Props = {

}

type State = {
  dataFreq: object;
}



export default class Parent extends React.Component<Props, State>{
    private timer: any;

constructor(props: Props) {
  super(props);
  this.state = {

    dataFreq: {
      minimalFrequency: 250,
      maximialFrequency: 8000
  }
  };
}

getDataFromForm = (dataFreq: any) => {
  this.setState({dataFreq: dataFreq })
  console.log(dataFreq)

};
render() {
  const minFreq  = this.state.dataFreq;

  console.log("This is a this dataFreq", this.state.dataFreq);
  console.log("This is a this minimalFrequency", minFreq);

  return (
    <div>
      <BasicUsage getDataFromForm={this.getDataFromForm}/>
    </div>
  );
}
}

Jimmy-P · Accepted Answer · 2021-06-25 09:10:04Z

1

You are still able to use your class component as a parent.

If I am I correct in assuming that you want to use data from the form in your main component, and the main component is the parent, you can define a function in your main component, something like

getDataFromForm(data){
this.setState({data: data })
}

Then you pass this function into your BasicUsage component

//In your main components render function, or wherever you are using the BasicUsage component
  <BasicUsage
    //other props you want to send into BasicUsage from the main component
    getDataFromForm={getDataFromForm}
  />

Now in your BasicUsage component's onSubmit function you can call the function you passed as a prop as such

     const onSubmit = (data: any) => {
        //Do something with your data if you want to change format or process it somehow; 
//in this case you should probably make a new variable and pass the new variable into getDataFromForm
        props.getDataFromForm(data) //Call the function in the parent component
      }

If you're using the form data in a sibling component and not a parent component, you would make the getDataFromForm function in a common parent and pass the function to the BasicUsage component and the state.data value into the sibling component where you want to access the data

answered Jun 25, 2021 at 9:10

Jimmy-P

1511 silver badge6 bronze badges

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

6 Comments

christheliz Over a year ago

Thanks for your answer. How can I access the data object in the main component? console.log("This is a this dataFreq", this.state.dataFreq); gets me the changing dataFreq object but I can't get the minimalFrequency value within the object by calling console.log("This is a this dataFreq", this.state.dataFreq.minimalFrequency);

Jimmy-P Over a year ago

I'm not familiar with react-hook-form but maybe in <form onSubmit={handleSubmit(onSubmit)}> you can change it to <form onSubmit={(e) => handleSubmit(e)}> and have a look at the data that comes into the onSubmit function?

christheliz Over a year ago

I changed the function

getDataFromForm = (dataFreq: any) => {   this.setState({dataFreqMin: dataFreq.minimalFrequency })   this.setState({dataFreqMax: dataFreq.maximalFrequency })  }

and it worked. Also added the types to the parent.

christheliz Over a year ago

could you explain how it would work if I set getDataFromFrom as a parent and call it from a child2 while in child1 is the parent component of BasicUsage. If I define a parent component and export the function, I get the error that this is not defined. My parent component is just the function described by you above and an export so that I can use it in other components

Jimmy-P Over a year ago

Don't export the function, just pass it as a prop to any child where you want to use it. You can keep passing it as a prop down the hierarchy to grandchildren, great grandchildren etc, known as "prop drilling". I don't think that function would work as a component by itself, it needs to be a class component with a state to use setState for example. (As an aside, I highly recommend looking into and starting to use hooks and function components. It's a fairly easy transition and a more comfortable way to write React code)

|

Collectives™ on Stack Overflow

Using react-hook-form in React with Typescript in child component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related