import { useForm } from "react-hook-form";
export default const SimpleForm = () => {
// For Multiple input
const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
const newData = new FormData();
newData.append("userid", currentUser._id);
newData.append("username", currentUser.name);
newData.append("comments", data.comments);
// In Console get Json Formatedata You can fatch
// Post To the database to save
console.log([...newData]);
// Reset the Form
reset();
}
return (
<form onSubmit={handleSubmit(onSubmit)} className="form">
<input type="text" {...register("comments")} />
</form>
)
}
// 2nd Options
<form onSubmit={handleSubmit(onSubmit)} className="form">
<input type="text" name="username"/>
</form>
const onSubmit = (event) => {
event.preventDefault();
console.log(event.target.elements.username.value) // from elements property
console.log(event.target.username.value) // or directly
}
also use usestate then connect useState to input box by using setName()
<input placeholder="example Mike"
onChange={(event) => {setName(event.target.value);}} />