How can i get an input value with useForm hook and then perform a POST with json-server?

Question

I'm new to ReactJs and trying to make a CRUD in a fake-API with json-server. How can i properly use useForm Hook and perform a POST of the user's name and email?

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

import Form from "../Form";
import Field from "../Field";
import Button from "../Button";

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

  const newUser = (user) => {
    console.log(user);
    const url = "http://localhost:3002/posts";
    fetch(url, {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        name: "example-name",
        email: "example@mail.com",
      }),
    })
      .then((resp) => resp.json())
      .then((user) => {
        console.log("User created success", user);
      });
  };

  return (
    <Form onSubmit={handleSubmit(newUser)}>
      <Field.Text label="Name" name="name" type="text" {...register} />
      <Field.Text label="Email" name="email" type="email" {...register} />
      <Button>Submit</Button>
    </Form>
  );
};
export default FormNew;

Answer 1

You have to register your key of value on your <Field.Text/> component

<Form onSubmit={handleSubmit(newUser)}>
  <Field.Text label="Name" name="name" type="text" {...register('name')} />
  <Field.Text label="Email" name="email" type="email" {...register('email')} />
  <Button>Submit</Button>
</Form>