title: How to do form post API in react?
body: <p>I would like to add data to my database through the API url, with a form. But it's not really working. I'm kind of struggling to make it work. When I click on 'add' I check the array but nothing new is being added. I think i'm doing something wrong in the body variable. But not sure. How can i get the values from the form into the url API?
  Here is my code:</p>
  <pre><code>export function AlbumForm(props) {
     const [PostId, setPostId] = useState(0);
      const {register, handleSubmit, errors, control} = useForm({
      defaultValues: props.album
          ? props.album
          : {
              name: &quot;&quot;,
              artist: &quot;&quot;,
              imageUrl: &quot;&quot;,
          },
      }); 
  
      const useCreateAlbum =((data) =&gt; {
          console.log(data);
          const requestOptions = {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: data,
              mode: 'cors'
          };
          fetch(process.env.REACT_APP_API_URL, requestOptions)
              .then(response =&gt; response.json())
              .then(data =&gt; setPostId(data.id));
      });
    
  
      return (
          &lt;div className=&quot;AlbumForm&quot;&gt;
              &lt;h2&gt;Album Form&lt;/h2&gt;
              &lt;form onSubmit={handleSubmit(useCreateAlbum)}&gt;
                  &lt;input type=&quot;text&quot; {...register(&quot;name&quot;)} placeholder=&quot;Name&quot; name=&quot;name&quot;/&gt;
                  &lt;input type=&quot;text&quot; {...register(&quot;artist&quot;)} placeholder=&quot;Artist&quot; name=&quot;artist&quot; /&gt;
                  &lt;input type=&quot;text&quot; {...register(&quot;imageUrl&quot;)} placeholder=&quot;ImageUrl&quot; name=&quot;imageUrl&quot;/&gt;
                  &lt;button type=&quot;submit&quot;&gt;{props.submitbutton}&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>never mind I solved it. I just had to do this:</p>
  <pre><code>const useCreateAlbum =((data) =&gt; {
          console.log(data);
          const requestOptions = {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(data),/////here is the change
              mode: 'cors'
          };
          fetch(process.env.REACT_APP_API_URL, requestOptions)
              .then(response =&gt; response.json())
              .then(data =&gt; setPostId(data.id));
      });
  
  </code></pre>