title: POST request in react hook form not fetching the user input
body: <p>I am working on an address book and I have fetched all the data from this API url:</p>
  <p><a href="https://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/users</a></p>
  <p>The API cannot really be modified, but it should behave &quot;like if&quot; according to this message in the documentation: &quot;resource will not be really updated on the server but it will be faked as if.&quot;</p>
  <p>I have set up the react hook form but when I submit my form this is what I get in the dev tools tab network? Shouldn't be showing the user inputs at this point instead of empty string for all fields? The id is the only thing that gets updated.
  Is there anything wrong with my Submit function or the actual fetch? Is it ok I have the POST fetch in this component where I have my form as well or should be in the same component where I have the GET request?</p>
  <p><a href="https://i.stack.imgur.com/4o3CH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4o3CH.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/vGFBP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vGFBP.png" alt="enter image description here" /></a></p>
  <p>Would this one be a good way to approach the POST request?</p>
  <pre><code>const NewUserForm = () =&gt; {
       
    const { register, handleSubmit, formState: { errors } } = useForm();
       
    const onSubmit = () =&gt; {
  
      fetch(URL, {
        method: 'POST',
        body: JSON.stringify({
          id:'',
          name: '',
          email: '',
          address1:'',
          address2:'',
          city:'',
          phone:''    
        }),
          headers: {
            'Content-type': 'application/json; charset=UTF-8'
          },
      })
        .then((response) =&gt; response.json())
        .then((json) =&gt; console.log(json)); 
    }
    
      return (
        &lt;&gt;
          &lt;Header&gt;New user&lt;/Header&gt;
            &lt;FormContainer&gt;
              &lt;Form onSubmit={handleSubmit(onSubmit)}&gt;      
                &lt;input type=&quot;text&quot; placeholder=&quot;name&quot;  {...register(&quot;name&quot;, { required: true })} /&gt;
                {errors.name &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
  
                &lt;input type=&quot;text&quot; placeholder=&quot;email&quot; {...register(&quot;email&quot;, { required: true })} /&gt;
                {errors.email &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
  
                &lt;input type=&quot;text&quot; placeholder=&quot;address1&quot;{...register(&quot;address1&quot;, { required: true })} /&gt;
                {errors.address1 &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
  
                &lt;input type=&quot;text&quot; placeholder=&quot;address2&quot;{...register(&quot;address2&quot;, { required: true })} /&gt;
                {errors.address2 &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
  
                &lt;input type=&quot;text&quot; placeholder=&quot;city&quot;{...register(&quot;city&quot;, { required: true })} /&gt;
                {errors.city &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
                
                &lt;input type=&quot;text&quot; placeholder=&quot;phone&quot;{...register(&quot;phone&quot;, { required: true })} /&gt;
                {errors.phone &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
                
                &lt;input type=&quot;submit&quot; /&gt;
              &lt;/Form&gt;
            &lt;/FormContainer&gt;
        &lt;/&gt;  
      );
  }
  </code></pre>