title: how handle input errors validation in sub component react hook form
body: <p>I made a component called <code>Input</code>. Now I want to know if the error was in that component (<code>Input</code> component) Show me. I use <code>Input</code> component inside <code>Login</code> component and I use <code>react-hook-form</code> for validating forms.</p>
  <p><strong>Input component</strong></p>
  <pre><code>const Input = ({data, extraData, register, errors})=&gt;{
      const inp = extraData.name
      return &lt;Fragment&gt;
          {
              extraData.id &amp;&amp;
              extraData.label &amp;&amp;
              &lt;label htmlFor={extraData.id}&gt;{extraData.label}&lt;/label&gt;
          }
          &lt;input {...register(extraData.name, {...data})} {...extraData} /&gt;
          {data.required &amp;&amp; &lt;Fragment&gt;
              {errors.inp?.type === 'required' &amp;&amp; &lt;p&gt;required&lt;/p&gt;}
          &lt;/Fragment&gt;}
      &lt;/Fragment&gt;
  }
  export default Input;
  </code></pre>
  <p><strong>Login component</strong></p>
  <pre><code>const Login = ()=&gt;{
      const {handleSubmit, register, formState: {errors}} = useForm()
      const onS = (data) =&gt;{
          console.log(data)
      }
      return &lt;Fragment&gt;
          &lt;form onSubmit={handleSubmit(onS)}&gt;
              &lt;Input data={
                  {
                      minLength : 5,
                      maxLength : 30,
                      required : true,
                  }
              } extraData ={
                  {
                      type : 'text',
                      placeholder : 'Enter Your Name',
                      name : 'name',
                      label : 'name', id : 'name1'
                  }
              } register={register} errors={errors}/&gt;
  
              &lt;Input data={
                  {
                      minLength : 5,
                      maxLength : 30,
                      required : true,
                  }
              } extraData ={
                  {
                      type : 'text',
                      placeholder : 'Enter Your Family',
                      name : 'Family',
                      label : 'Family', id : 'Family1'
                  }
              } register={register} errors={errors}/&gt;
  
              &lt;button&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/Fragment&gt;
  }
  export default Login;
  </code></pre>