title: How to pass form values as FormData in reactjs on submit function
body: <p>I have a dynamic form generated using json data and I need to pass the form input values on submit. I'm planning to send the values as formdata. I have created submit function but i don't know how to append the values in formdata and need to pass through post method using Axios. I'm new to react can anyone tell me how to do this. Below is my code.</p>
  <pre><code>var DATA = {
    &quot;indexList&quot;: [{
      &quot;Label&quot;: &quot;Name&quot;,
      &quot;Type&quot;: &quot;text&quot;,
      &quot;Regex&quot;: &quot;&quot;,
      &quot;Default_Val&quot;: &quot;&quot;,
      &quot;Values&quot;: {
        &quot;Key&quot;: &quot;&quot;,
        &quot;Value&quot;: &quot;&quot;
      },
      &quot;Validtion Msg&quot;: &quot;&quot;,
      &quot;Script&quot;: &quot;&quot;,
      &quot;Mandatory&quot;: &quot;Y&quot;,
      &quot;maxLength&quot;:&quot;16&quot;,
      &quot;minLength&quot;:&quot;7&quot;,
      &quot;format&quot;:&quot;Alphanumeric&quot;,
      &quot;cssClassName&quot;: &quot;form-control&quot;,
      &quot;Placeholder&quot;: &quot;&quot;
    },
    {
      &quot;Label&quot;: &quot;Select Language&quot;,
      &quot;Type&quot;: &quot;dropdown&quot;,
      &quot;Regex&quot;: &quot;&quot;,
      &quot;Default_Val&quot;: &quot;English&quot;,
      &quot;Values&quot;: [{
        &quot;Key&quot;: &quot;option1&quot;,
        &quot;Value&quot;: &quot;English&quot;
      },{
        &quot;Key&quot;: &quot;option2&quot;,
        &quot;Value&quot;: &quot;Spanish&quot;
      }],
      &quot;Validtion Msg&quot;: &quot;&quot;,
      &quot;Script&quot;: &quot;&quot;,
      &quot;Mandatory&quot;: &quot;Y&quot;,
      &quot;maxLength&quot;:&quot;&quot;,
      &quot;minLength&quot;:&quot;&quot;,
      &quot;format&quot;:&quot;&quot;,
      &quot;cssClassName&quot;: &quot;form-control&quot;,
      &quot;Placeholder&quot;: &quot;&quot;
    },
    {
      &quot;Label&quot;: &quot;Type&quot;,
      &quot;Type&quot;: &quot;radio&quot;,
      &quot;Regex&quot;: &quot;&quot;,
      &quot;Default_Val&quot;: &quot;&quot;,
      &quot;Values&quot;: [{
        &quot;Key&quot;: &quot;option1&quot;,
        &quot;Value&quot;: &quot;Form1&quot;
      }, {
        &quot;Key&quot;: &quot;option2&quot;,
        &quot;Value&quot;: &quot;Form2&quot;
      }, {
        &quot;Key&quot;: &quot;option3&quot;,
        &quot;Value&quot;: &quot;Form3&quot;
      },{
        &quot;Key&quot;: &quot;option4&quot;,
        &quot;Value&quot;: &quot;Form4&quot;
      },{
        &quot;Key&quot;: &quot;option5&quot;,
        &quot;Value&quot;: &quot;Form5&quot;
      }],
      &quot;Validtion Msg&quot;: &quot;&quot;,
      &quot;Script&quot;: &quot;&quot;,
      &quot;Mandatory&quot;: &quot;Y&quot;,
      &quot;maxLength&quot;:&quot;&quot;,
      &quot;minLength&quot;:&quot;&quot;,
      &quot;format&quot;:&quot;&quot;,
      &quot;cssClassName&quot;: &quot;form-control&quot;,
      &quot;Placeholder&quot;: &quot;&quot;
    }
    ]
  };
  
  var Menu = React.createClass({
  
    getInitialState() {
      return {
      }
    },
  
    _renderElement: function(group){
      switch(group.Type){
        case 'text':
          return (
            &lt;input
              className={group.cssClassName}
              id={group.Label}
              placeholder={group.Placeholder}
              required={group.Mandatory == 'Y' ? true : false}
            /&gt;
          );
  
        case 'dropdown':
          return (
            &lt;select className={group.cssClassName}&gt;
              &lt;option value=&quot;&quot;&gt;{group.Placeholder}&lt;/option&gt;
              {group.Values.map(el =&gt; &lt;option&gt;{el.Value}&lt;/option&gt;)}
            &lt;/select&gt;
          );
  
        case 'radio':
          return (
            &lt;div className={group.Type}&gt;
              &lt;div for=&quot;let value of group.Values&quot;&gt;
                {group.Values.map(el=&gt; (
                  &lt;label&gt;&lt;input name=&quot;radios&quot;/&gt;{el.Value}&lt;/label&gt;
                ))}
              &lt;/div&gt;
            &lt;/div&gt;
          );
      }
    },
  
    renderForm: function () {
      var data = DATA.indexList;
      return data.map(group =&gt; {
        return (
          &lt;div&gt;
            &lt;label for={group.Label}&gt;{group.Label}&lt;/label&gt;
            &lt;div&gt;
              {this._renderElement(group)}
            &lt;/div&gt;
          &lt;/div&gt;
        )
      });
    },
  
  
    _onSubmit: function () {
      let formData = new FormData();
      var data1 = DATA.indexList;
      data1.map(group =&gt; {
        formData.append(group.Label); // How to get the input value here as a second parameter, so than i can pass the label name and corresponding value to form data.
      });
  
      const config = {
        headers: { 'content-type': 'multipart/form-data' }
      }
  
      Axios.post('',formData, config)
        .then(response =&gt; {
          console.log(response);
        })
        .catch(error =&gt; {
            console.log(error);
        });
    },
  
    render: function() {
      return (    
        &lt;div className=&quot;container&quot;&gt;
          &lt;br/&gt;
          &lt;div className=&quot;panel panel-primary&quot;&gt;
            &lt;div className=&quot;panel-heading&quot;&gt;Form&lt;/div&gt;
            &lt;div className=&quot;panel-body&quot;&gt;
              &lt;form&gt;
                &lt;div className=&quot;form-group&quot;&gt;
                  &lt;div className=&quot;col-xs-5&quot;&gt;
                    {this.renderForm()}
                    &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot; onSubmit={this._onSubmit()}&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;      
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  });
  
  ReactDOM.render(&lt;Menu/&gt;, document.getElementById('app'));
  </code></pre>