Tengo componentes Parent e Child , donde el último tiene un formulario:

 import React from "react"; import { useForm } from "react-hook-form"; function Parent() { const onSubmit = (data) => { console.log(data); }; return <Child onSubmit={onSubmit} /> } function Child({ onSubmit }) { const { register, handleSubmit, } = useForm(); return ( <form onSubmit={handleSubmit(onSubmit)}> <input defaultValue="test" {...register("example")} /> <input type="submit" /> </form> ); }

Aquí necesito invocar el envío de formularios desde el componente principal.

Si bien podría llevar useForm a un componente principal, siento que esto va en contra del principio de encapsulación ya que useForm se usa en el componente secundario, idealmente debería estar allí:

 function Parent() { const { register, handleSubmit, } = useForm(); const onSubmit = (data) => { console.log(data); }; return <Child submit={handleSubmit(onSubmit)} register={register} /> } function Child({ submit, register }) { return ( <form onSubmit={submit}> <input defaultValue="test" {...register("example")} /> <input type="submit" /> </form> ); }

¿Hay una mejor manera de hacer esto?