Not getting any data back-CodePudding

import React, { useState } from 'react'

import {useForm} from "react-hook-form"

const SubmittionBox = () => {

const{reg, handleSubmit} = useForm()

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


return (
<form onSubmit={handleSubmit(onSubmit)} ref={reg}>
    
       <input type="text" placeholder="Type Name Here"  name ="name" required ref={reg}/>
       <input type="Submit"/>
   
</form>
)

}

export default SubmittionBox

When I hit the submit button, the only thing I get back is Object and not the data that I put in the text box

CodePudding user response：

try this

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          type="text"
          {...register("name")}
          placeholder="Type Name Here"
          required
        />
        <input type="Submit" />
      </form>
    </div>
  );
}

One of the key concepts in React Hook Form is to register your uncontrolled component into the hook. This will make its value available for both the form validation and submission.

CodePudding user response：

I suggest not using useForm(). Instead create new FormData() object in the called function.

const handleSubmit = e => {
    const data = new FormData(e.target)
}

return (
  <form onSubmit={handleSubmit}>
       <input type="text" placeholder="Type Name Here" name="name" required />
       <input type="submit"/>
  </form>
)

You can now use the "data" variable as a body of your request.