title: Submitting a dynamic form in react js using php
body: <p>The current situation: I have a dynamic form, which I made using ReactJS, so you can add/delete parts of the form and I can not predict how many parts there are going to be. I'm saying parts and not input, because the form consists of different parts(divs), that contain several inputs. All divs contain the same amount of inputs that serve the same purpose (you can find an example below).</p>
  
  <p>I now need to submit the form. When making an application using regular old JavaScript, I simply submitted the input values to a php-file(by declaring the method and action in the form), with which I then saved the data to an XML or JSON-file (up until now I have only been making very small-scale applications, so that was sufficient). Submitting a dynamic form was very easy this way and I tried to use the same method for this form, however, it did not work. I read about how ajax-requests for react js forms, but in all the examples that I have seen, they all declared the data within that request like so:</p>
  
  <pre><code>data: {
      “form_name”: this.state.contactName,
      “form_email”: this.state.contactEmail,
      “form_msg”: this.state.contactMessage
  },
  </code></pre>
  
  <p>I don't think that would work in my instance, as I can not predict the amount of inputs.</p>
  
  <p>Here is some of my code:</p>
  
  <p>Child-Component that renders the single divs:</p>
  
  <pre><code>export default class FormPart extends React.Component {
  
  render() {
      return(
          &lt;div className="formpart"&gt;
              &lt;label&gt;Title&lt;/label&gt;
              &lt;input type="text" placeholder={this.props.header} /&gt;
              &lt;textarea className="content" placeholder={this.props.content}&gt;&lt;/textarea&gt;
              &lt;DeleteButton onClick={this.handleClick}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>Parent Component that renders the children and adds the dynamic functionality:</p>
  
  <pre><code>function createData(header, content) {
      id += 1;
      return {header, content, id};
  } 
  
  class ExampleForm extends React.Component {
      constructor(props) {
      super(props);
      this.addItem = this.addItem.bind(this);
      this.state = {
          data : [
              createData( Header1, Content1),
              createData( Header2, Content2),
              createData( Header3, Content3),
              ],
          newdata : createData( "Enter a title", "Enter some content"),
      }
  }
  
  addItem() {
      this.state.data.push(this.state.newdata);
      this.setState(this.state);
      this.state
  }
  
  deleteClick(n) {
      for(var i=0; i&lt;this.state.data.length; i++) {
          if(this.state.data[i] === n) {
              delete this.state.data[i]
          }
      }
      this.setState({
          data: this.state.data
      });
  }
  
  handleSubmit() {
      alert("I don't know what to do");
  }
  
  render () {
      let { data }= this.state;
      return( 
          &lt;form&gt;
              {data.map((n, v) =&gt; {
                  return(
                  &lt;Part key={"item_" + v} handledClick={this.deleteClick.bind(this, n)} header={n.header} content={n.content} /&gt;
                  );
              })}
              &lt;AddButton addElement={this.addItem}/&gt;
              &lt;/form&gt;
      );
  }
  </code></pre>
  
  <p>I don't really know where to start with this. I was thinking that, if I maybe find a way to save the new input in the state in my data array, that I could just save that array using an ajax-request, but I do not know how and if that's a good way to do it.
  Surprisingly, I found very few questions, blog posts, etc. similar to mine and few of them were helpful, even though you would think this is a bigger topic.</p>
  
  <p>Anyway, to sum it up: Can I technically just submit my form like I used to? If you, would that be a "good" solution or bad practice? Are there any other ways to do it?</p>