title: Saving state of inputs added by user in React
body: <p>I working on a small personal project using React on Rails.  I am very new to both of these things. </p>
  
  <p>I have a react component that is a form. I also have another component that has some inputs that the user can add as many as needed. Using the Add Properties button.  I am trying to save the state of each input that is added.  I could have the component itself save the state but how then would I send it with my fetch post request that happens onClick?  </p>
  
  <p>I have looked at react's context API but cant figure out if this would help me.  Also I have never used redux so it is possible I should look into that as well. </p>
  
  <p><a href="https://reactjs.org/docs/context.html" rel="nofollow noreferrer">https://reactjs.org/docs/context.html</a>
  <a href="https://redux.js.org/basics/usagewithreact" rel="nofollow noreferrer">https://redux.js.org/basics/usagewithreact</a></p>
  
  <p>I understand that I don't want to reach into state.  So I was trying to figure out how to create an array of objects that will hold the input values of each input pair.  But I cannot seem to wrap my mind around how to implement.  </p>
  
  <pre><code>  class ProductsCreate extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        name: '',
        upc: '',
        availableOn: '',
        inputs: []
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
      if (e.target.name === 'name') {
        this.setState({ name: e.target.value });
      }
      if (e.target.name === 'upc') {
        this.setState({ upc: e.target.value });
      }
      if (e.target.name === 'date') {
        this.setState({ availableOn: e.target.value });
      }
    }
  
    submitData = () =&gt; {
      fetch(`/send_data`, {
        method: 'POST',
        body: JSON.stringify({
          name: this.state.name,
          upc: this.state.upc,
          availableOn: this.state.availableOn
        }),
        headers: {
          'Content-Type': 'application/json'
        },
        credentials: 'same-origin'
      })
        .then(response =&gt; {
          return response.json;
        })
        .then(data =&gt; {
          console.log(data);
        });
    };
  
    clickHandler = e =&gt; {
      e.preventDefault();
      this.submitData();
    };
  
    appendInput = e =&gt; {
      e.preventDefault();
      const newInput = `input-${this.state.inputs.length}`;
      this.setState({ inputs: this.state.inputs.concat([newInput]) });
    };
  
    render() {
      return (
        &lt;div className="form_container"&gt;
          &lt;h1&gt;Products&lt;/h1&gt;
          &lt;form&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input type="text" name="name" onChange={this.handleChange} /&gt;
            &lt;label&gt;UPC&lt;/label&gt;
            &lt;input type="text" name="upc" onChange={this.handleChange} /&gt;
            &lt;label&gt;Availiable On&lt;/label&gt;
            &lt;input
              type="text"
              name="date"
              placeholder="mm/dd/yyyy"
              onChange={this.handleChange}
            /&gt;
            &lt;h1&gt;Properties&lt;/h1&gt;
            {this.state.inputs.map(input =&gt; (
              &lt;Properties key={input} /&gt;
            ))}
            &lt;button onClick={this.appendInput}&gt;Add Properties&lt;/button&gt;
            &lt;button onClick={this.clickHandler}&gt;Save&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ProductsCreate;
  </code></pre>
  
  <p>This is the component that will be added on click</p>
  
  <pre><code>import React from 'react';
  
  class Properties extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        &lt;div className="property_container"&gt;
          &lt;label&gt;Property Name&lt;/label&gt;
          &lt;input type="text" name="propertyName" /&gt;
          &lt;label&gt;Property Value&lt;/label&gt;
          &lt;input type="text" name="propertyValue" /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Properties;
  </code></pre>