react-hook-form - Cannot pass form data to a parent component

Viewed 2860

I'm using react-hook-form and trying to pass the data from a form to its parent. For this I'm trying to pass the data via a callback, but it's not working. When I console.log data inside the parent component, I get undefined.

Parent component

import React from 'react';
import InputForm from './InputForm';

const App = (data) => {
  const onFormSubmit = () => {
    console.log(data.name);
  };

  return (
    <div className='App'>
       <InputForm onceSubmited={() => onFormSubmit()} />
    </div>
  );
};

export default App;

Child component

import React from 'react';
import { useForm } from 'react-hook-form';

const InputForm = ({ onceSubmited }) => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    onceSubmited(data);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type='text'
            name='name'
            ref={register}
          />

          <input
            type='email'
            name='email'
            ref={register}
          />
          
        <button type='submit'>
          Submit
        </button>
      </Form>
    </>
  );
};

export default InputForm;
1 Answers

You need to pass the argument in your arrow function. This should make it work:

import React from 'react';
import InputForm from './InputForm';

const App = () => {
  const onFormSubmit = (data) => {
    console.log(data.name);
  };

  return (
    <div className='App'>
       <InputForm onceSubmited={(data) => onFormSubmit(data)} />
    </div>
  );
};

export default App;
Related