title: How to submit a form through onSubmit event handler
body: <p>I have a ReactJS form with an onSubmit function and a &quot;Submit&quot; input as below.</p>
  <pre><code>&lt;Form id=&quot;addItem&quot; method=&quot;post&quot;
    onSubmit={this.handleSubmit}&gt;
    &lt;Form.Group&gt;
      &lt;Form.Row&gt;
        &lt;Col xs={6}&gt;
  .
  .
  .
    &lt;/Form.Group&gt;
    &lt;Form.Control type=&quot;submit&quot; id=&quot;addItemSubmit&quot; name=&quot;add&quot; value=&quot;Submit&quot; /&gt;
  </code></pre>
  <p>The handleSubmit function is supposed to performs validations not covered by HTML5 validations and then submit the form to an API. The function handleSubmit is as follows</p>
  <pre><code>handleSubmit(e) {
      e.preventDefault();
      let isValid = validateAddItemForm(this);
      if (isValid) {
        console.log(isValid);
        //const url = &quot;/api/addItem/&quot; + this.props.matchId;
        console.log(&quot;match offer url : &quot; + props);
        const res = fetch(url, {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
          },
          body: JSON.stringify({
           id: 0,
          }) 
         })
         .then((response) =&gt; response.json())
         .then((responseJson) =&gt; {
           return null;
         })
         .catch((error) =&gt; {
           console.error(error);
         });
      } else {
        console.log(isValid);
        return isValid;
      }
    }
  
  </code></pre>
  <p>Now I have two questions.
  How to pass the props to handleSubmit? I need to pass some props from the current Component to fully generate the correct URL for the fetch request.
  How do I pass Form fields in the &quot;body&quot; of the fetch request? Is the filled form available as an object for the handleSubmit funcion when the Submit button is clicked? Or do I need to gather the values of individual fields using document.getElementById(&lt;field_id&gt;).value and pass it in the body?</p>
  <p>EDIT: I am currently accessing each form field using the document.getElementById inside the form validation function. That doesn't seem to be a good idea. That is why I want to access it as an object if possible.</p>