title: How to store a list of select component in an array in react
body: <p>I have a table contains for example 10 rows, each row has a select.</p>
  
  <p>How can i store all selected items from the all 10 rows in an array in state to be like that 
  <code>[{id, value}, {id, value}]</code>
  ??</p>
  
  <p>and want to make sure that when i change the selected value from one of the options it changes the previous value in the array.</p>
  
  <p>my current function</p>
  
  <pre><code>onSelectGrade(e) {
          const { selectedGrades } = this.state
          let index
          if (e.target.value) {
              let gradeItem = { cid: +e.target.id, id: +e.target.value }
              selectedGrades.push(gradeItem)
          } else {
              index = selectedGrades.indexOf(+e.target.id)
              selectedGrades.splice(index, 1)
          }
          this.setState({ selectedGrades: selectedGrades })
      }
  </code></pre>
  
  <p>and here is the select component it the table's row</p>
  
  <pre><code>                              &lt;select
                                  defaultValue="Default"
                                  id={customer.id.toString()}
                                  onChange={this.onSelectGrade}
                                  className="browser-default custom-select"
                              &gt;
                                  &lt;option disabled value="Default"&gt;Choose grade&lt;/option&gt;
                                  {customer.categoryList &amp;&amp;
                                      customer.categoryList.map(cat =&gt;
                                          &lt;option
                                              key={cat.id}
                                              value={cat.id.toString()}&gt;
                                              {cat.name}
                                          &lt;/option&gt;
                                      )}
                              &lt;/select&gt;
  </code></pre>
  
  <p>but it doesn't work as i need.. it stores the array like this [{"cid":11,"id":2},{"cid":11,"id":3}]
  but i need it like this [{11, 2},{11, 3}]</p>
  
  <p>and when i change an option added before it adds it one more time</p>
  
  <p>and it delays clicks by 1, that means the first choice return empty array> then the second choice return array contains the first choice.. and so on</p>
  
  <p>Please help if you can,
  Thank you</p>