title: react-hook-form use in component to pass props for dynamic text fields
body: <p><strong>Original question</strong></p>
  <p>I have the following component</p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { useForm } from 'react-hook-form';
  
  export default function FormField({ type, name, formRegister, errorMsg, state }) {
    const methods = useForm();
    const { register } = methods;
  
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;label htmlFor={name} className=&quot;block text-sm font-medium text-gray-900&quot;&gt;
            Password
          &lt;/label&gt;
  
          &lt;div className=&quot;mt-1&quot;&gt;
            &lt;input
              type={type}
              name={name}
              {...register({ formRegister }, { required: { errorMsg } })}
              className=&quot;py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md&quot;
              onChange={(event) =&gt; {state}(event.target.value)}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  FormField.PropTypes = {
    type: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    formRegister: PropTypes.string.isRequired,
    errorMsg: PropTypes.string.isRequired,
    state: PropTypes.string.isRequired
  };
  
  FormField.defaultProps = {
    type: 'text',
    name: 'text',
    formRegister: 'text',
    errorMsg: 'text is required',
    state: 'setName'
  };
  </code></pre>
  <p>My goal for this component is to create a dynamic field component so I can do the following</p>
  <pre><code>&lt;FormField
    type=&quot;password&quot;
    name=&quot;password&quot;
    formRegister=&quot;password&quot;
    errorMsg=&quot;Password is required&quot;
    state=&quot;setPassword&quot;
  /&gt;
  </code></pre>
  <p>However, I'm having issues in passing in the react-form-hooks <code>...register</code></p>
  <p>I get the following</p>
  <pre><code>TypeError: path.split is not a function
  </code></pre>
  <p>Any help would be great, cheers.</p>
  <p><strong>original edit</strong></p>
  <p>So the forms are now working thanks too knoefel, however, here is the issue, the error messages are now not showing.</p>
  <p>So in my component I have everything needed for errors to be passed, however they are not showing, debugging this I've found that when I do this</p>
  <pre><code>&lt;FormField
    {...register(email, { required: 'email is required' })}
    type=&quot;email&quot;
    label=&quot;Email&quot;
    name=&quot;email&quot;
    errorMsg=&quot;Email is required&quot;
    placeholder=&quot;john.doe@ebrookes.dev&quot;
  /&gt;
  </code></pre>
  <p>The error now shows, so what gives? I already have this in the component?</p>
  <p><strong>Updated question #2</strong></p>
  <p>I now have the following component</p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  const FormField = React.forwardRef(
    ({ type, name, label, required, placeholder, ...props }, ref) =&gt; {
      return (
        &lt;div&gt;
          &lt;label htmlFor={name} className=&quot;block text-sm font-medium text-gray-900&quot;&gt;
            {label}
            &lt;span className=&quot;text-red-500 font-bold text-lg&quot;&gt;{required &amp;&amp; '*'}&lt;/span&gt;
          &lt;/label&gt;
  
          &lt;div className=&quot;mt-1&quot;&gt;
            &lt;input
              {...props}
              name={name}
              ref={ref}
              type={type}
              id={name}
              className={['field', `field--${type}`].join(' ')}
              placeholder={placeholder}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  );
  
  export default FormField;
  
  FormField.propTypes = {
    type: PropTypes.oneOf(['text', 'email', 'password', 'file', 'checkbox']),
    register: PropTypes.func,
    name: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    placeholder: PropTypes.string
  };
  
  FormField.defaultProps = {
    type: 'text',
    name: 'text',
    label: 'Label',
    placeholder: ''
  };
  </code></pre>
  <p>and now the following page</p>
  <pre><code>
  import Head from 'next/head';
  import Link from 'next/link';
  import Image from 'next/image';
  import Background from '../../../public/images/option1.png';
  import Router from 'next/router';
  import { signIn } from 'next-auth/client';
  import { useForm, FormProvider } from 'react-hook-form';
  
  // components
  import ErrorsPopup from '../../components/ErrorsPopup';
  import FormField from '../../components/Forms/FormField';
  import Button from '../../components/Button';
  
  export default function Login() {
    const methods = useForm();
    const { handleSubmit, register } = methods;
  
    const onSubmit = async (data) =&gt; {
      await signIn('credentials', {
        redirect: false,
        data
      });
  
      Router.push('/dashboard');
    };
  
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;Ellis Development - Login&lt;/title&gt;
        &lt;/Head&gt;
  
        &lt;div className=&quot;relative&quot;&gt;
          &lt;div className=&quot;md:flex&quot;&gt;
            {/* Image */}
            &lt;div className=&quot;flex items-center justify-center bg-blue-700 h-screen lg:w-96&quot;&gt;
              &lt;Image src={Background} width={350} height={350} layout=&quot;fixed&quot; /&gt;
            &lt;/div&gt;
  
            {/* Contact form */}
            &lt;div className=&quot;flex flex-col justify-center px-6 sm:px-10 w-full&quot;&gt;
              &lt;h1 className=&quot;text-4xl font-extrabold text-grey-800&quot;&gt;Login&lt;/h1&gt;
  
              {/* errors */}
              &lt;FormProvider {...methods}&gt;
                &lt;ErrorsPopup /&gt;
              &lt;/FormProvider&gt;
  
              &lt;form
                onSubmit={handleSubmit(onSubmit)}
                className=&quot;mt-6 flex flex-col gap-y-6 sm:gap-x-8&quot;&gt;
                {/* email field */}
                &lt;FormField
                  {...register('email', {
                    required: 'Email is required',
                    pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                  })}
                  type=&quot;email&quot;
                  label=&quot;Email&quot;
                  placeholder=&quot;john.doe@ebrookes.dev&quot;
                  required
                /&gt;
  
                {/* password field */}
                &lt;FormField
                  {...register('password', {
                    required: 'Password is required'
                  })}
                  type=&quot;password&quot;
                  label=&quot;Password&quot;
                  placeholder=&quot;*******&quot;
                  required
                /&gt;
  
                &lt;div className=&quot;flex items-center justify-between sm:col-span-2&quot;&gt;
                  &lt;div&gt;
                    &lt;Button type=&quot;submit&quot; label=&quot;Login&quot; icon=&quot;SaveIcon&quot; /&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                    &lt;Link href=&quot;/dashboard/auth/register&quot;&gt;
                      &lt;a className=&quot;underline decoration-blue-500 decoration-4 hover:decoration-2 mr-4&quot;&gt;
                        Register
                      &lt;/a&gt;
                    &lt;/Link&gt;
  
                    &lt;Link href=&quot;/dashboard/auth/forgot&quot;&gt;
                      &lt;a className=&quot;underline decoration-blue-500 decoration-4 hover:decoration-2&quot;&gt;
                        Forgot your password?
                      &lt;/a&gt;
                    &lt;/Link&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>The issue here now is that the form is still not submitting.</p>
  <p>Any help would be great, cheers.</p>
  <p><strong>edit #2</strong></p>
  <p>This is what I get when submitting the form and also added <code>console.log(formState.errors)</code>
  <a href="https://i.stack.imgur.com/zSf1O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSf1O.png" alt="enter image description here" /></a></p>
  <p>Also when I fill the form out I get no errors, so could the issue be around on the onSubmit?.</p>
  <p>Also if I console log the data I get this
  <a href="https://i.stack.imgur.com/LJ9NA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LJ9NA.png" alt="enter image description here" /></a></p>