title: how can i submit form data and file using fetch in react?
body: <p>At first, the task was set to send data from the form. The problem was solved in the following way:</p>
  <pre><code>export let useRequest = () =&gt; {
    let request = async (url, method = &quot;Post&quot;, body = null, headers = {}) =&gt; {
      try {
        if (body) {
          body = JSON.stringify(body);
          headers[&quot;Content-Type&quot;] = &quot;application/json&quot;;
        }
  
        let res = await fetch(url, { method, body, headers });
        let data = await res.json();
        return data;
      } catch (e) {
        throw e;
      }
    };
  </code></pre>
  <p>form:</p>
  <pre><code> &lt;form&gt;
     &lt;input name=&quot;name&quot; class=&quot;help-input&quot; placeholder=&quot;name&quot; type=&quot;text&quot; value=&quot;&quot;/&gt;
     &lt;input name=&quot;email&quot; class=&quot;help-input&quot; placeholder=&quot;email&quot; type=&quot;text&quot; value=&quot;&quot;/&gt;
     &lt;textarea name=&quot;message&quot; class=&quot;help-input&quot;placeholder=&quot;message&quot;&gt;&lt;/textarea&gt; 
     &lt;input name=&quot;file&quot; type=&quot;file&quot; value=&quot;&quot;&gt;
     &lt;input name=&quot;agree&quot; type=&quot;checkbox&quot; value=&quot;&quot; checked/&gt;
     &lt;button type=&quot;submit&quot; onClick=&quot;props.send&quot;&gt;send&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Form container(form wrapper):</p>
  <pre><code>export let HelpBlock = (props) =&gt; {
    let { request } = useRequest();
    let reqFromForm = async (values) =&gt; {
      let data = await request(&quot;/api/message&quot;, &quot;POST&quot;, props.values);
      console.log(data.message)
    };
    return (
      &lt;&gt;
        &lt;Form send={reqFromForm}&gt;&lt;/Form&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>After clicking on the button, data comes with the following structure:</p>
  
  <pre><code>{
      name:name,
      email:email,
      message:message,
      file:file
  }
  </code></pre>