title: How to store a values of multiple inputs in the state of a mapping React
body: <p>I'm stuck, I am trying to store inputs into my state, but I don't have lucky.</p>
  
  <p>I have a page where you can create combos of foods, when you select one product you must assign a quantity to that product,</p>
  
  <p><strong>Example:</strong> </p>
  
  <p><strong>Combo 20</strong></p>
  
  <p>** Product: Pizza, Quantity: 2**</p>
  
  <p>I have the following code I'm trying to add this quantity, store in any place but apparently the data overlap and in the end I end up having 3 products and only the last result of the quantity</p>
  
  <pre><code>state = {
      optionsProductsCount : []
  }
  
  commonChange = (event) =&gt; {
      this.setState({
          optionsProductsCount : {
              id : event.target.name,
              value : event.target.value
          }
      })
  }
  
  {this.state.selectedOption.map(product =&gt; (
      &lt;div className="form-group" key={product.value}&gt;
          &lt;input 
              onChange={this.commonChange}
              name={product.value}
              style={{width: '60px'}} 
              type="number" min="1" step="1" title="Numbers only" 
              className="form-control" 
              required
          /&gt;
      &lt;/div&gt;
   ))}
  </code></pre>
  
  <p>I was thinking in a lot of ways to solve, but I can't make work anyone</p>
  
  <pre><code>this.state.optionsProductsCount.push({
      id: event.target.name,
      value: event.target.value
  })
  </code></pre>
  
  <p>When I try to do it I have duplicate data, This is because when you place a quantity and then change it the data is sent two times, and if you change again three, and so on.</p>